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 相关文章推荐
很多人都是用下面的js刷新站IP和PV
Sep 05 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
灵活的理解JavaScript中的this指向
Feb 25 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 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生成EXCEL的东东
2006/10/09 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php中curl使用指南
2015/02/05 PHP
php取得字符串首字母的方法
2015/03/25 PHP
php-fpm中max_children的配置
2019/03/15 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python制作刷网页流量工具
2017/04/23 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python用for循环求和的方法总结
2019/07/08 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
列车长先进事迹材料
2014/01/25 职场文书
核心价值观演讲稿
2014/05/13 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书