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


Posted in Javascript onJuly 04, 2013

用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";
}
</script>

display:
值                    描述
none                  此元素不会被显示。
block                 此元素将显示为块级元素,此元素前后会带有换行符。
inline                默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block          行内块元素。(CSS2.1 新增的值)
list-item             此元素会作为列表显示。
run-in                此元素会根据上下文作为块级元素或内联元素显示。
compact CSS           中有值compact,不过由于缺乏广泛支持,已经从CSS2.1 中删除。
marker CSS            中有值marker,不过由于缺乏广泛支持,已经从CSS2.1 中删除。
table                 此元素会作为块级表格来显示(类似<table>),表格前后带有换行符。
inline-table          此元素会作为内联表格来显示(类似<table>),表格前后没有换行符。
table-row-group       此元素会作为一个或多个行的分组来显示(类似<tbody>)。
table-header-group    此元素会作为一个或多个行的分组来显示(类似<thead>)。
table-footer-group    此元素会作为一个或多个行的分组来显示(类似<tfoot>)。
table-row             此元素会作为一个表格行显示(类似<tr>)。
table-column-group    此元素会作为一个或多个列的分组来显示(类似<colgroup>)。
table-column          此元素会作为一个单元格列显示(类似<col>)
table-cell            此元素会作为一个表格单元格显示(类似<td> 和<th>)
table-caption         此元素会作为一个表格标题显示(类似<caption>)
inherit               规定应该从父元素继承display 属性的值。
Javascript 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
js的逻辑运算符 ||
May 31 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
jquery获取tagName再进行判断
May 29 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
javascript操作数组详解
Dec 17 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
vue实现放大镜效果
Sep 17 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 #Javascript
js局部刷新页面时间具体实现
Jul 04 #Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 #Javascript
javascript闭包的高级使用方法实例
Jul 04 #Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 #Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 #Javascript
JS实现简单的Canvas画图实例
Jul 04 #Javascript
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python断言assert的用法代码解析
2018/02/03 Python
基于python实现高速视频传输程序
2019/05/05 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
先进个人获奖感言
2014/01/24 职场文书
消防安全员岗位职责
2014/03/10 职场文书
班干部演讲稿
2014/04/24 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书