CSS中的display:none和visibility:hidden的区别 -优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_16325/article/details/81654524

本文通过实例演示了CSS中display:none与visibility:hidden两种隐藏元素方式的区别。前者使元素完全不占空间，后者则仅使元素不可见但仍保留其空间位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。

display:none：使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden：使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

具体区别请看演示代码吧：

<!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 xhref="javascript:alert($('CnLei_1').innerHTML+'的宽度:\n'+GetXYWH($('CnLei_1')).W);">点击这里 display:none;</a></p>
<p><a xhref="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>