社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > js将控件隐藏的方法及display属性介绍_javascript技巧

js将控件隐藏的方法及display属性介绍_javascript技巧

WBOY
发布： 2016-05-16 17:30:08
原创
1500 人浏览过

用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。
 

复制代码 代码如下:

function displayHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display="none";
}
function displayShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display=" ";//display为空的话会好使，为block会使后边的空间换行
}
function visibilityHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="hidden";
}
function visibilityShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="visible";
}


display:
值                    描述
none                  此元素不会被显示。
block                 此元素将显示为块级元素，此元素前后会带有换行符。
inline                默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block          行内块元素。（CSS2.1 新增的值）
list-item             此元素会作为列表显示。
run-in                此元素会根据上下文作为块级元素或内联元素显示。
compact CSS           中有值compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
marker CSS            中有值marker，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
table                 此元素会作为块级表格来显示（类似），表格前后带有换行符。
inline-table          此元素会作为内联表格来显示（类似
），表格前后没有换行符。
table-row-group       此元素会作为一个或多个行的分组来显示（类似）。
table-header-group    此元素会作为一个或多个行的分组来显示（类似）。
table-footer-group    此元素会作为一个或多个行的分组来显示（类似）。
table-row             此元素会作为一个表格行显示（类似）。
table-column-group    此元素会作为一个或多个列的分组来显示（类似）。
table-column          此元素会作为一个单元格列显示（类似）
table-cell            此元素会作为一个表格单元格显示（类似
和）
table-caption         此元素会作为一个表格标题显示（类似
）
inherit               规定应该从父元素继承display 属性的值。
相关标签：
display 属性
来源：php.cn
上一篇：jquery和javascript的区别(常用方法比较)_基础知识 下一篇：JS定时刷新页面及跳转页面的方法_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在网络应用程序中显示版本信息的最佳实践是什么？ 我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...
来自于 2024-04-06 19:13:16
0
2
476
显示隐藏的侧面板：选中 我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...
来自于 2024-04-06 15:49:33
0
1
319
单击并滚动时隐藏/显示 div 我想创建一个隐藏的搜索表单，当我们单击搜索图标时，该表单会出现，而当用户单击或滚动时，搜索表单会隐藏。
来自于 2024-04-06 12:20:46
0
1
386
将底部设置为自身高度的100% 我想设置一个元素，使其从页面视图中隐藏，并且其顶部恰好接触页面底部（该元素在视线之外）。当元素的高度恒定为66px时，我首先执行botttom:-66px;'。但现在我需要这个来处...
来自于 2024-04-04 22:41:16
0
1
1438
next 在使用 Nodejs 的中间件中无法正常工作 我正在使用Nodejs并使用expressjs，现在我正在研究中间件功能，我想知道中间件概念中的“下一个”工作是什么？“下一个进入下一个中间件”，但是什么是“下一个中间件”？我尝试...
来自于 2024-04-04 17:33:56
0
1
340
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板