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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
JS实现简易留言板增删功能
Feb 08 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
浅析php学习的路线图
2013/07/10 PHP
php实现httpclient类示例
2014/04/08 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP+HTML+JavaScript+Css实现简单爬虫开发
2016/03/28 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
Python logging模块用法示例
2018/08/28 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
影视制作岗位职责
2013/12/04 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
幼儿园秋游活动方案
2014/01/21 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
2015年营业员工作总结
2015/04/23 职场文书
千与千寻观后感
2015/06/04 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python