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 innerText和innerHtml应用
Jan 28 Javascript
JQuery 常用操作代码
Mar 14 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
用python写的一个wordpress的采集程序
2016/02/27 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python中格式化字符串的四种实现
2020/05/26 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
销售辞职报告范文
2014/01/12 职场文书
环保倡议书500字
2014/05/15 职场文书
就业协议书
2014/09/12 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python