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 相关文章推荐
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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字符串过滤,转换函数代码
2012/05/01 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
js实现进度条的方法
2015/02/13 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
Python多线程下载文件的方法
2015/07/10 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
自荐信的两点禁忌
2013/10/30 职场文书
家教广告词
2014/03/19 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python