js将控件隐藏及display属性的使用介绍


Posted in Javascript onDecember 30, 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>

值 描述
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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
JS的document.all函数使用示例
Dec 30 #Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 #Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 #Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 #Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 #Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 #Javascript
jQuery中.live()方法的用法深入解析
Dec 30 #Javascript
You might like
PHP Mysql编程之高级技巧
2008/08/27 PHP
php数组去重的函数代码
2013/02/03 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
python中global与nonlocal比较
2014/11/21 Python
详解python中requirements.txt的一切
2017/03/03 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python实现Dijkstra算法
2018/10/17 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
2014小学植树节活动总结
2014/03/10 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
详细介绍python类及类的用法
2021/05/31 Python
无线电通信名词解释
2022/02/18 无线电