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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
javascript函数特点实例分析
May 14 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
JavaScript触发器详解
2007/03/10 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python连接phoenix的方法示例
2017/09/29 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
寒假实习自荐信
2014/01/26 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
2014全国两会心得体会
2014/03/17 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers