display通常可以設置為none、inline、block
visibility通常可以設置為hidden、visible
當display為none,visibility為hidden時,元素都會不見。不過其還有不同之處。
display會將元素隱藏掉,並且位置不再被佔據,而visibility則是佔據原來的位置。
看例子即可明白:
複製代碼代碼如下:
<div id="myDiv">
<p>
</p>
</div>
<input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="是否可見visibility" />
<input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="是否可見display" />
<script>
function isVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible"; }
else{
me.style.visibility="hidden";
}
}
function isDisplay(me){
if (me.style.display=="none"){
me.style.display="block"; }
else{
me.style.display="none";
}
}
</script>