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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
Javascript的表单验证长度
Mar 16 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
js中的reduce()函数讲解
Jan 18 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
十天学会php之第九天
2006/10/09 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
在JavaScript中调用php程序
2009/03/09 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
强制设为首页代码
2006/06/19 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python如何快速实现分布式任务
2017/07/06 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
python 实现Harris角点检测算法
2020/12/11 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
高分子材料与工程专业推荐信
2013/12/01 职场文书
自我评价是什么
2014/01/04 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
工程安全员岗位职责
2014/03/09 职场文书
2014高考励志标语
2014/06/05 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL