visibility和display設定元素的顯示和隱藏的區別

admin發表於2017-03-19

隱藏一個元素最為常用的屬性是visibility和display，這兩個屬性都可以將指定元素設定為隱藏狀態，或許還有很多朋友不知道它們兩者之間的區別，下面就通過程式碼例項做一下簡單介紹。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div
{
  width:100px;
  height:100px;
  background:red;
  margin-top:10px;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
  var otop=document.getElementById("top");
  var topbt=document.getElementById("topbt");
   
  var obottom=document.getElementById("bottom");
  var bottombt=document.getElementById("bottombt");
   
  topbt.onclick=function(){otop.style.display="none"}
  bottombt.onclick=function(){obottom.style.visibility="hidden"}
}
</script> 
</head> 
<body> 
<div id="top"></div>
<input type="button" id="topbt" value="點選隱藏" />
<div id="bottom"></div>
<input type="button" id="bottombt" value="點選隱藏" />
</body> 
</html>

以上程式碼實現了我們的要求，點選對應按鈕可以隱藏對應的div，從上面就可以看出兩者的區別了，使用display隱藏元素，它佔有的物理空間也會被清除，使用visibility隱藏元素，儘管元素不可見了，但是它還是佔有的物理空間還是會被儲存。

相關文章