CSS中的display:none和visibility:hidden的区别

时间:2011-11-16 11:24来源:未知作者:admin 点击: 次

分享到：

display:none 隐藏对象。隐藏对象其物理空间 visibility:hidden 隐藏对象。保留其占据的物理空间二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。 di

display:none 隐藏对象。隐藏对象其物理空间

visibility:hidden 隐藏对象。保留其占据的物理空间

二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。
display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

XML/HTML Code复制内容到剪贴板

<style>
.divpage{ clear:both; padding:10px;}
.box{ width:100px; height:50px; background:#666666; margin:10px; float:left}
</style>
<div class="divpage">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="divpage">
<div class="box">4</div>
<div class="box" style="display:none">5</div>
<div class="box">6</div>
</div>
<div class="divpage">
<div class="box">7</div>
<div class="box" style="visibility:hidden">8</div>
<div class="box">9</div>
</div>

很明显的看出来，display:none是将对象完全性隐藏。而visibility:hidden隐藏了对象内容，却保留它的物理空间来占位。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<head>
<title> 实例演示：CSS中的display:none和visible:hidden的区别 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CnLei.y.l@gmail.com">
<meta name="copyright" content="http://www.cnlei.com" />
</head>
<body>
<p><a href="javascript:alert($('CnLei_1').innerHTML+'的宽度:n'+GetXYWH($('CnLei_1')).W);">点击这里 display:none;</a></p>
<p><a href="javascript:alert($('CnLei_2').innerHTML+'的宽度:n'+GetXYWH($('CnLei_2')).W);">点击这里 visibility:hidden;</a></p>
<div id="CnLei_1" style="display:none;">CnLei_1</div>
<div id="CnLei_2" style="visibility:hidden;">CnLei_2</div>
<script type="text/javascript">
var w3c=(document.getElementById)? true: false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var ie5=(w3c && ie)? true : false;
var ns6=(w3c && (navigator.appName=="Netscape"))? true: false;
function $(o){
return document.getElementById(o)?document.getElementById(o):o;
}
function GetXYWH(o){
var o=$(o);
var nLt=0;
var nTop=0;
var offsetParent = o;
while (offsetParent!=null && offsetParent!=document.body) {
nLt+=offsetParent.offsetLeft;
nTop+=offsetParent.offsetTop;
if(!ns6){
parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):"";
parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTop+=parseInt(offsetParent.currentStyle.borderTopWidth):"";
}
offsetParent=offsetParent.offsetParent;
}
return {X:nLt,Y:nTop,W:o.offsetWidth,H:o.offsetHeight};
}
</script>
</body>
</html>

提示:可以修改后运行.

上一篇：as2及as3 flash广告物料中添加clickTAG的方法as3中兼容ie不被拦截的方法
下一篇：div宽度不固定居中解决办法

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

BS项目中的

css实现气泡

精彩文章

热点文章

CSS中的display:none和visibility:hidden的区别

热门标签

赞助商链接