CSS样式“display:none”与“visibility:hidden”区别

　　CSS样式“display:none”和“visibility:hidden”都可以实现将页面元素隐藏，但是具体的效果是有差别的！下面通过两个小实验来说明这种差异。

　　实验代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>none</title>
 5     <meta charset="utf-8">
 6     <style type="text/css">
 7         div {
 8             height: 200px;
 9             width: 200px;
10             text-align: center;
11             margin: 20px;
12         }
13         #div1 {
14             background-color: #E33;
15         }
16         #div2 {
17             background-color: #33E;
18         }
19     </style>
20     <script type="text/javascript">
21         window.onload = function(){
22             document.getElementById('btn').onclick = function(){
23                 document.getElementById('div1').style.display = 'none';
24             };
25         }
26     </script>
27 </head>
28 <body>
29     <div id="div1">div 1</div>
30     <div id="div2">div 2</div>
31     <button id="btn">hide</button>
32 </body>
33 </html>

View Code

　　实验一：使用样式“display:none”隐藏元素。

　　如上述代码所示，点击按钮时，会为Id为“div1”的div元素添加样式“display:none”。下面开始实验。

　　左图为点击“hide”按钮之前，页面的显示效果，右图为点击按钮之后的页面效果。

点击hide按钮之前页面的显示效果点击hide按钮之后页面的显示效果

　　结论一：样式“display:none”会完全隐藏元素，不再占据页面空间！

　　实验二：使用样式“visibility:hidden”隐藏元素。

　　首先将上述代码片段修改如下：

1       <script type="text/javascript">
2         window.onload = function(){
3             document.getElementById('btn').onclick = function(){
4                 document.getElementById('div1').style.visibility = 'hidden';
5             };
6         }
7     </script>

View Code

　　下面开始实验，左右两图分别是点击“hide”按钮之前和之后的页面显示效果。

点击hide按钮之前页面的显示效果点击hide按钮之后页面的显示效果

　　结论二：样式“visibility:hidden”仅仅是隐藏了元素的显示效果，但是仍然占据页面空间！