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 相关文章推荐
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
JSONP跨域请求
Mar 02 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
详解vue的双向绑定原理及实现
May 05 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
php5数字型字符串加解密代码
2008/04/24 PHP
PHP 表单提交给自己
2008/07/24 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP速成大法
2015/01/30 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
动态加载iframe
2006/06/16 Javascript
window.showModalDialog使用手册
2007/01/11 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python实现重建二叉树的三种方法详解
2018/06/23 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
根叔历年演讲稿
2014/05/20 职场文书
校园文化标语
2014/06/18 职场文书
运动会演讲稿50字
2014/08/25 职场文书
八年级英语教学反思
2016/02/15 职场文书
入党心得体会
2019/06/20 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python