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”僅僅是隱藏了元素的顯示效果，但是仍然占據頁面空間！