一個設置為display:none;的div，在用.height()方法獲取不到它的高，獲取到的高度為0.

<div style="width:100px;height:100px;background:red;visibility:hidden"></div>
//對象隱藏后，還有占有相應的空間大小

<div style="width:100px;height:100px;background:red;display:none"></div>
//對象隱藏后，對象不占任何空間

CSS中的visibility和display兩個屬性很容易被混淆，因為它們看起來是做同樣的事情，但實際上，這兩個屬性是完全不同的。
 visibility屬性用來設置一個給定的元素是否顯示（visibility="visible|hidden"），但是，雖然一個元素的visibility被設置為hidden，但是該元素仍然會占據設計的位置：hidden僅僅是隱藏, 但是他的位置會保留

注意如果display屬性沒有被明確設置，將默認被設置為該類元素的常用值。
明顯地，兩個屬性中display屬性更有用，多數情況下在隱藏文字的時候要將相關的元素做相應的調節（例如樹結構）。none表示完全沒有, 當前的位置會被后面的元素補上來

使用 visibility:hidden屬性會使對象不可見，但該對象在網頁所占的空間沒有改變（看不見但摸得到），等於留出了一塊空白區域，而 display:none屬性會使這個對象徹底消失（看不見也摸不到）。

<script language="JavaScript">
    function toggleVisibility(me){
        if (me.style.visibility=="hidden"){
            me.style.visibility="visible";
            }
        else {
            me.style.visibility="hidden";
            }
        }
</script>

<div onclick="toggleVisibility(this)" style="position:relative">