二者都是隐藏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>
分享到：
相关推荐
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
首先，我们可以区分display:none和visibility:hidden这两个CSS属性。display:none的元素不仅不可见，而且不占据页面上任何空间，即没有尺寸信息。而visibility:hidden的元素虽然不可见，但是仍然保留空间，因此具有...
`visibility:hidden` 和 `display:none` 的主要区别在于，前者隐藏元素的同时保留其占据的空间，而后者则完全从布局中移除元素。这种差异在处理页面布局时尤为关键。例如，如果一个元素的 `display` 被设置为 `none`...
在介绍了这么多隐藏元素的方法之后，我们要特别注意display:none和visibility:hidden两种属性的主要区别。这两者之间的差异主要表现在以下几个方面： 1. 空间占据：display:none;隐藏的元素不占据任何布局空间，而...
在Web页面前台编码过程中，CSS属性display: none经常被用来隐藏页面上的元素，以便于构建动态交互效果或是实现页面布局调整。但这个属性的使用需要特别注意几个关键点，以确保不会影响页面的交互性、可访问性以及...
在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...
总结一下，`display:none` 和 `visibility:hidden` 的主要区别在于： - `display:none` 会完全移除元素在布局中的存在，而 `visibility:hidden` 只是让元素变得不可见，但保留其在布局中的位置。 - `display:none` ...
### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中，经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
在网页设计和开发中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们用于控制元素在页面上的可见性和布局。这篇博客文章通过代码示例深入探讨了这两个属性的区别和用法。 首先，`display` 属性主要用于...
总之，`visibility`和`display`在CSS中扮演着不同的角色，`visibility`关注的是元素的可见状态，而`display`则涉及元素在布局中的存在状态。了解它们的差异并合理运用，可以帮助我们更好地控制网页的显示效果和用户...
总的来说，`visibility`和`display`都是CSS中强大的工具，用于控制元素的可见性和布局。理解它们的区别并正确使用，可以让你在创建网页时更加灵活，同时也能避免可能对SEO产生的负面影响。在实际工作中，开发者应...
在网页开发中，CSS属性`display: none;`常用于控制页面上的元素是否显示，当设置为`none`时，该元素及其子元素不会出现在渲染的页面上。但是，不同的浏览器在处理`display: none;`时可能会有细微差别，导致在使用...
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
在CSS中，隐藏元素主要有两种方法：`display: none` 和 `visibility: hidden`，它们在隐藏元素的同时，对页面布局和交互性有着不同的影响。此外，还有一些其他的技术，如设置`height: 0`结合`overflow: hidden`或者...
在本文中，我们将详细介绍jQuery中的可见性过滤器：hidden和：visibility的用法，并结合实例来分析它们的功能和使用技巧。 首先，我们需要明确隐藏（hidden）和可见（visible）状态的区别： - hidden（隐藏）状态...
在CSS布局中，`display`和`visibility`是两个非常重要的属性，它们分别负责控制元素的显示方式和可见性。虽然两者都能使元素在页面上不可见，但它们的机制和影响是不同的。 首先，`visibility`属性主要用于决定元素...
`display` 属性是CSS中不可或缺的一部分，它对网页布局起着至关重要的作用。通过`display`属性，我们可以控制HTML元素的显示方式，从而实现各种复杂的布局效果。下面我们将深入探讨`display`属性的原理、用途及其...