JavaScript语法——style.display 属性

最新推荐文章于 2024-07-29 13:45:08 发布
转载 最新推荐文章于 2024-07-29 13:45:08 发布 · 1.5k 阅读 · 1
文章标签：

#javascript #css #table #ie #脚本

本文详细介绍了JavaScript中style.display属性的使用方法及其各种参数的意义，包括block、none、inline等，并阐述了这些参数如何影响网页元素的显示方式。

JavaScript语法——style.display 属性
来源：转载   人气：23136   录入时间：2006-12-23


    display版本：CSS1/CSS2　 兼容性：IE4+ NS4+　继承性：无
   
   
   语法：
   
   display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
   
   参数：
   
   block : 　CSS1　块对象的默认值。用该值为对象之后添加新行
   none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
   inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
   compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
   marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
   inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
   list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
   run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
   table : 　CSS2　将对象作为块元素级的表格显示
   table-caption : 　CSS2　将对象作为表格标题显示
   table-cell : 　CSS2　将对象作为表格单元格显示
   table-column : 　CSS2　将对象作为表格列显示
   table-column-group : 　CSS2　将对象作为表格列组显示
   table-header-group : 　CSS2　将对象作为表格标题组显示
   table-footer-group : 　CSS2　将对象作为表格脚注组显示
   table-row : 　CSS2　将对象作为表格行显示
   table-row-group : 　CSS2　将对象作为表格行组显示
   
   说明：
   
   设置或检索对象是否及如何显示。
   目前 IE5.5仅支持以上CSS1的参数。
   对应的脚本特性为display。请参阅我编写的其他书目。

JavaScript语法——style.display 属性
display版本：CSS1/CSS2　 兼容性：IE4+ NS4+　继承性：无
   
   
   语法：
   
   display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
   
   参数：
   
   block : 　CSS1　块对象的默认值。用该值为对象之后添加新行
   none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
   inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
   compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
   marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
   inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
   list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
   run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
   table : 　CSS2　将对象作为块元素级的表格显示
   table-caption : 　CSS2　将对象作为表格标题显示
   table-cell : 　CSS2　将对象作为表格单元格显示
   table-column : 　CSS2　将对象作为表格列显示
   table-column-group : 　CSS2　将对象作为表格列组显示
   table-header-group : 　CSS2　将对象作为表格标题组显示
   table-footer-group : 　CSS2　将对象作为表格脚注组显示
   table-row : 　CSS2　将对象作为表格行显示
   table-row-group : 　CSS2　将对象作为表格行组显示
   
   说明：
   
   设置或检索对象是否及如何显示。
   目前 IE5.5仅支持以上CSS1的参数。
   对应的脚本特性为display。请参阅我编写的其他书目。
willonboy
关注
web网页设计实训——03.26
weixin_44762531的博客
03-30 1345
CSS样式表： 插入样式表的方法有三种: 外部样式表 内部样式表 内联样式 外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： <head> <link rel="s...
JavaScript 动态网页实例 —— 广告效果
cccloveforever的博客
07-02 1551
广告是现代网页设计中不可或缺的内容。广告可以有很多种形式，但最终目的都是要吸引观众的注意力。尽管广告少不了画面、音效和广告语等效果，但其实现主要还是应用JavaScript 代码，只要很好掌握了JavaScript程序设计，剩下的就是创意和美工了。本章介绍几种广告效果，包括对联广告、飘动广告、滚动广告和特殊视觉效果的广告，相信读者会从中受到启发。
JavaScript中的style.display属性操作
10-27
今天为大家介绍的是JavaScript中的style.display属性操作实现代码与参数介绍
用JS来控制DIV样式的display属性
01-08
用JS来控制DIV样式的display属性 这上我以前做一个留言本的 一个弹出登陆模块 我根据你的需求稍做改变，你可以自己改一下就可以用
js中style.display=""无效的解决方法
10-25
主要介绍了js中style.display=""无效的解决方法,是js程序设计中非常常见的问题,需要的朋友可以参考下
style.display 属性
gdsimon的专栏
10-05 879
display版本：CSS1/CSS2　 兼容性：IE4+ NS4+　继承性：无          语法：        display : block | none | inline | compact | marker |inline-table | list-item | run-in | table |table-caption | table-ce
<div class="row m-t-5 pingwei-tag-list hide"> <div class="col-md-2"> <label class="form-label"> 评委搜索: </label> </div> <div class="col-md-10"> <div class="input-group mb-3"> <input type="text" class="form-control search-input" data-id="{$vo.id}" placeholder="请输入评委姓名..." aria-label="Search" @select="handleSelect" > <button class="btn btn-outline search-btn" type="button"> <i class="fa fa-search"></i> 搜索 </button> </div> </div> </div> <div class="row assign-select-pingwei hide"> <div class="col-md-2"> <label class="form-label"> <span class="text-danger">*</span>选择评委: </label> </div> <div class="col-md-10"> <div id="pingwei-checkbox" class="selectgroup selectgroup-pills"> {volist name='pingwei' id='vo' } <div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" class="custom-control-input form-check-input pingwei-checkbox" id="form-pingwei[{$vo.id}]" value="{$vo.id}" name="pingwei[]"> <label class="custom-control-label" for="form-pingwei[{$vo.id}]" style="cursor: pointer;"><i class="fa fa-tags badge badge-success m-r-5 m-b-5">{$vo.realname}</i></label> <div class="invalid-feedback">请选择...</div> </div> <!-- <div class="custom-control custom-checkbox custom-control-inline pingwei-item"--> <!-- data-pingwei-id="{$vo.id}">--> <!-- <input type="checkbox" class="custom-control-input form-check-input pingwei-check-input"--> <!-- id="form-pingwei[{$vo.id}]" value="{$vo.id}" name="pingwei[]">--> <!-- <label class="custom-control-label" for="form-pingwei[{$vo.id}]" data-toggle="tooltip"--> <!-- style="cursor: pointer;" title="{$vo.realname}-{$vo.phone}">--> <!-- <i class="fa fa-user"></i>--> <!-- {$vo.realname}--> <!-- </label>--> <!-- </div>--> {/volist} </div> </div> </div> // 获取DOM元素 var searchInput = document.querySelector('.search-input'); var searchBtn = document.querySelector('.search-btn'); var pingweiItems = document.querySelectorAll('.pingwei'); // 所有评委项 // 初始化 function init() { bindEvents(); } // 事件绑定 function bindEvents() { // 输入框输入事件 searchInput.addEventListener('input', debounce(handleSearch, 200)); // 搜索按钮点击事件 searchBtn.addEventListener('click', () => handleSearch()); } // 处理搜索逻辑 function handleSearch() { const query = searchInput.value.trim().toLowerCase(); // 如果无关键词，显示所有评委并隐藏提示 if (!query) { pingweiItems.forEach(item => item.style.display = 'inline-block'); loadingTip.style.display = 'none'; emptyTip.style.display = 'none'; return; } // 显示加载状态 loadingTip.style.display = 'block'; emptyTip.style.display = 'none'; setTimeout(() => { let hasMatch = false; // 是否有匹配的评委 // 遍历评委项进行模糊匹配 pingweiItems.forEach(item => { const name = item.dataset.name.toLowerCase(); if (name.includes(query)) { item.style.display = 'inline-block'; hasMatch = true; } else { item.style.display = 'none'; } }); // 隐藏加载状态 loadingTip.style.display = 'none'; // 根据是否有匹配显示空提示 emptyTip.style.display = hasMatch ? 'none' : 'block'; }, 200); } // 启动初始化 init();
12-16
item.style.display = 'inline-block'; }); loadingTip.classList.add('hide'); emptyTip.classList.add('hide'); return; } // 显示加载状态 loadingTip.classList.remove('hide'); emptyTip.classList....
var pingwei = Array.from(document.querySelectorAll('.pingwei-item')).map(item => { var checkbox = item.querySelector('input[type="checkbox"]'); return { id: checkbox.value, realname: item.dataset.name || item.textContent.trim() }; }); console.log(pingwei); // 模糊查询函数 function searchPingwei(name) { var keyword = name?.trim().toLowerCase() || ''; if (!keyword) return pingwei; // 根据姓名模糊匹配 return pingwei.filter(item => { var itemName = item.realname?.trim().toLowerCase() || ''; return itemName.includes(keyword); }); } // 更新评委复选框显示 function updatePingweiDisplay(matchList) { var allItems = document.querySelectorAll('.pingwei-item'); var emptyTip = document.querySelector('.empty-tip') || document.createElement('div'); // 确保emptyTip存在 if (matchList.length === 0) { allItems.forEach(item => item.style.display = 'none'); emptyTip.textContent = '暂无匹配的评委'; return; } // 隐藏所有评委项 allItems.forEach(item => item.style.display = 'none'); emptyTip.textContent = ''; // 显示匹配的评委项 matchList.forEach(item => { // 修改选择器，使用data-name而不是data-pingwei-id（因为模板中使用的是data-name） var pingweiItem = document.querySelector(`.pingwei-item[data-name="${item.realname}"]`); if (pingweiItem) { pingweiItem.style.display = 'inline-block'; } }); } // 页面加载完成后绑定事件 document.addEventListener('DOMContentLoaded', function () { var searchInput = document.querySelector('.search-input'); var emptyTip = document.createElement('div'); emptyTip.className = 'empty-tip text-muted m-t-5'; document.querySelector('.assign-select-pingwei').appendChild(emptyTip); if (typeof pingwei === 'undefined') { // 获取所有项目数据 const items = []; document.querySelectorAll('.item').forEach(item => { items.push({ id: item.id, name: item.realname }); }); console.log(items); var tempPingwei = []; document.querySelectorAll('.pingwei-item').forEach(item => { var name = item.getAttribute('pingwei-realname'); if (name) tempPingwei.push({id: item.querySelector('.pingwei-checkbox').value, realname: name}); }); if (tempPingwei.length > 0) pingwei = tempPingwei; } // 搜索处理函数 var handleSearch = function () { const keyword = searchInput.value; const matchPingwei = searchPingwei(keyword); updatePingweiDisplay(matchPingwei); }; // 输入框实时搜索 let searchTimeout; searchInput.addEventListener('input', function () { clearTimeout(searchTimeout); searchTimeout = setTimeout(handleSearch, 300); }); // 初始显示所有评委 updatePingweiDisplay(pingwei); });
最新发布
12-16
你已经写出了一段功能完整的 JavaScript 代码，用于实现 **评委搜索 + 动态显示匹配项**。但目前存在几个 **关键问题导致“没反应”或显示异常**。 --- ## ✅ 一、核心结论（先说答案） > ❗ **你的 `...
JavaScript 动态网页实例 —— 基本菜单的设计
cccloveforever的博客
07-22 1348
本节实例给出基本的下拉菜单的实现方法。用户可以在下拉列表中选择一个链接，单击该链接后，将跳转至相应的链接页面。
style.display
woshixushigang的专栏
12-08 429
style.display &lt;html&gt;&lt;head&gt;&lt;script language=javascript&gt; function showclasscheck(checktype) { var objDiv = document.getElementById ("checkclass"); if (checktype==1) objDiv.style.di...
JavaScript的display属性
12-13 784
示例： <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>display</title> <script type="text/javascript"...
JavaScript元素结点；style.display——控制隐藏或者显示
xjdkxnhcoskxbco的博客
07-29 632
元素结点;style.display——控制隐藏或者显示。
javascript的style.display用法
Simplicity is more complicated than you think
07-22 2720
javascript的style.display用法2006-12-29 14:01  function showclasscheck(checktype)  {  var objDiv = document.getElementById ("checkclass");  if (checktype==1)  objDiv.style.display = "block";  else
js将控件隐藏及display属性
编程语言小筑
02-06 228
用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件...
Style display 属性
weixin_40321535的博客
11-28 1989
定义和用法display 属性设置或返回元素的显示类型。 HTML 中的元素大多是"内联"或"块"元素：一个内联元素，在其左侧和右侧都是浮动内容。一个块元素填满整个行，并没有什么可显示在其左侧或右侧。 display 属性还允许作者显示或隐藏一个元素。与 visibility 属性类似。然而，如果您设置 display:none，将隐藏整个元素，如果您设置 visibility:hidden，元素的
JS——JavaScript入门【JavaScript 之 display显示和隐藏】
qq_43201350的博客
07-24 1790
JS——JavaScript入门【JavaScript 之 display显示和隐藏】
js style的display
water6891的专栏
04-03 365
<br />table.rows(1).style.display == "none"； table.rows(1).style.display = "block";
style中display属性值
奋斗的小鸟
08-15 1934
display属性值有以下这些： none   此元素不会被显示。 block  此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 c
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值