javascript動態設定div的顯示和隱藏

antzone發表於2017-03-17
JavaScript

有時候需要根據程式碼的執行狀態或者需要動態設定div元素的顯示或者隱藏，當然不僅僅是div元素，這裡僅以div元素為例子。設定div的原始或者隱藏可以使用display和visibility，下面就通過程式碼例項對此進行一下演示。

程式碼例項如下:

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

以上程式碼演示了兩種將程式碼設定為隱藏的方式，下面分別做一下簡單介紹。

一.display方式:

1.將屬性值設定為"none"可以設定為隱藏，設定為"block"可以將其顯示。

2.此方式將元素隱藏以後，將不會保留原來佔據的空間。

二.visibility方式:

1.將屬性值設定為"hidden"可以設定為隱藏，設定為"visible"可以將其顯示。

2.此方式將元素隱藏以後，仍舊保留原來的空間。

相關文章