在WEB開發中，前臺HTML中經常需要控制元素的隱藏與顯示，我們最為最常見是二級導航欄（通過鼠標的移動來觸發onmouseover，onmouseout事件來實現二級菜單的顯示與隱藏）二級菜單的顯示與隱藏。
然而控制元素的影響與顯示有兩種方式：
1、display :?設置如何及是否顯示某元素
2、visibility :?設置元素可見或不可見
<html>
<head>
<title>HTML元素的顯示與隱藏控制</title>
<style type="text/css">
#div1,#div3{width:50px;height:50px;background:cyan;
}#div2,#div4{width:50px;height:80px;background:gray;
}
</style>
<script type="text/javascript">
function showAndHidden1(){var div1=document.getElementById("div1");var div2=document.getElementById("div2");if(div1.style.display=='block') div1.style.display='none';else div1.style.display='block';if(div2.style.display=='block') div2.style.display='none';else div2.style.display='block';
}function showAndHidden2(){var div3=document.getElementById("div3");var div4=document.getElementById("div4");if(div3.style.visibility=='visible') div3.style.visibility='hidden';else div3.style.visibility='visible';if(div4.style.visibility=='visible') div4.style.visibility='hidden';else div4.style.visibility='visible';
}
</script>
</head>
<body>
<div>display：元素的位置不被占用</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" οnclick="showAndHidden1();" value="display切換DIV" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" οnclick="showAndHidden2();" value="visibility屬性切換DIV "/>
</body>
</html>
Result：
小結：
? ? ? ? display 和visibility同時可以實現對元素的隱藏和顯示，區別在于visibility屬性做到的是將html元素隱藏，但其元素（即使是隱藏狀態）的所在的位置獨占，而display屬性操作html元素則不會想這樣，display屬性操作的是元素的類型inline,block,none這些屬性直接關系到元素的大小及存在與否。
用關于display和visibility曾遇到過：
? ? ? ? 寫二級導航欄菜單，當時用display來實現二級菜單的顯示與隱藏時，結果發現在第一次訪問或者刷新后第一次訪問，鼠標移動到一級菜單時二級子菜單感覺就想刷新不出來一樣，用visibility實現則不會出現像這樣的問題。
