JAVASCRIPT style 中visibility和display之间的区别


Posted in Javascript onJanuary 22, 2010

当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
---------------------------------------------------------------
例子:

<script language="JavaScript"> 
function toggleVisibility(me){ 
if (me.style.visibility=="hidden"){ 
me.style.visibility="visible"; 
} 
else { 
me.style.visibility="hidden"; 
} 
} 
</script> 
<div onclick="toggleVisibility(this)" style="position:relative">第一行文本将会触发"hidden"和"visible"属性,注意第二行的变化。</div> 
<div>因为visibility会保留元素的位置,所以虽然第一行看不见了但位置还在,第二行内容不会上下移动。</div>

解释:注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为"hidden"的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。
---------------------------------------------------------------
另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。
当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。
将display设置为inline,将使其行为和元素inline一样---即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。
--------------------------------------------------------------
例子:
<script language="JavaScript"> 
function toggleDisplay(me){ 
if (me.style.display=="block"){ 
me.style.display="inline"; 
alert("文本现在是:'inline'."); 
} 
else { 
if (me.style.display=="inline"){ 
me.style.display="none"; 
alert("文本现在是:'none'. 3秒钟后自动重新显示。"); 
window.setTimeout("blueText.style.display='block';",3000,"JavaScript"); 
} 
else { 
me.style.display="block"; 
alert("文本现在是:'block'."); 
} 
} 
} 
</script> 
<div>在<span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

---------------------------------------------------------------
最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)
---------------------------------------------------------------
display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例:
<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> 
<P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P> 
<P> 
<input type=button value="Inline" onclick="oSpan.style.display='inline'"> 
<input type=button value="Block" onclick="oSpan.style.display='block'"> 
<input type=button value="None" onclick="oSpan.style.display='none'"> 
<input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'"><input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> 
</P> 
<UL> 
<LI>将元素设为 block,会在该元素后换行。</LI> 
<LI>将元素设为 inline,会消除元素换行。</LI> 
<LI>将元素设为 none,隐藏该元素内容。</LI> 
</UL>

《太难了》:
同时,关于display:inline;和float:left;两者的区别可以参看该篇文章:
(display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:left,是针对块级元素的浮动形式,是不同形式的两种状态。)http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>float &inline</title> 
<style> 
*{text-align:center;padding:4px;} 
div,p{text-align:left;} 
span{/*float:right;*/ background:#f5f5f5;border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;} 
ul#inline li{ display:inline; list-style:none;border-left:1px #ccc solid;width:300px; background:#f5f5f5;/* float:left*/;} 
ul#float li{ float:left;display:inline; list-style:none;border-left:1px #666 solid;width:300px; background:#f5f5f5; } 
</style> 
</head> 
<body> 
<span style="width:300px;">span为内联/inline元素,给他宽度赋值是没有效果的。</span> 
<span style="width:100px; float:right;">span为内联/inline元素,给他宽度赋值100px+float:right;可以看到有了宽度。</span> 
<div> 
<p>这个li被定义为内联/inline,设置宽度没有效果</p> 
<ul id="inline"> 
<li>test</li> 
<li>test</li> 
</ul> 
</div> 
<div> 
<p>这个li被定义为内联/inline+float:left,设置宽度有效果</p> 
<ul id="float"> 
<li>test</li> 
<li>test</li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
深入研究React中setState源码
Nov 17 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 #Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 #Javascript
JavaScript 学习笔记(十二) dom
Jan 21 #Javascript
javascript parseInt与Number函数的区别
Jan 21 #Javascript
js parsefloat parseint 转换函数
Jan 21 #Javascript
jquery 防止表单重复提交代码
Jan 21 #Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 #Javascript
You might like
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
Javascript Global对象
2009/08/13 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Python交互环境下实现输入代码
2018/06/22 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
XML文档面试题
2015/08/05 面试题
教学实习自我评价
2014/01/28 职场文书
群众路线党课主持词
2014/04/01 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
村官2015年度工作总结
2015/10/14 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书