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 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
幼儿教师暑期培训方案
2014/08/27 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
员工教育培训协议书
2014/09/27 职场文书
党员检讨书范文
2014/12/27 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
Go timer如何调度
2021/06/09 Golang
JS 基本概念详细介绍
2021/10/16 Javascript
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript