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>
实验一：使用样式“display:none”隐藏元素。
如上述代码所示，点击按钮时，会为Id为“div1”的div元素添加样式“display:none”。下面开始实验。
左图为点击“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>
下面开始实验，左右两图分别是点击“hide”按钮之前和之后的页面显示效果。
结论二：样式“visibility:hidden”仅仅是隐藏了元素的显示效果，但是仍然占据页面空间！
时间： 2024-08-02 02:42:02