JavaScript點選切換div的顯示和隱藏

admin發表於2017-11-01
JavaScript

有些網頁功能具有點選同一個可以實現同一個元素的顯示和隱藏效果。

比如，如果需要填寫，點選就可以展開，然後再點選就可以隱藏，非常的人性化。

下面通過例項介紹一下如何實現此效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>點選顯示和隱藏效果</title>
<style type="text/css">
#thediv{
  background-color:green;
  height:200px;
  width:200px;
  display:none;
}
</style>
<script type="text/JavaScript">
function toggle(){
  if(thediv.style.display=="block"){
    thediv.style.display="none";
    this.value="顯示";
  } 
  else{
    thediv.style.display="block";
    this.value="隱藏";
  }
}
window.onload=function(){
  var bt=document.getElementById("bt");
  var thediv=document.getElementById("thediv");
  bt.onclick=toggle;
}
</script>
</head>
<body>
<div style="width:200px;margin:0px auto">
  <input type="button" id="bt" value="顯示"/>
  <div id="thediv"></div>
</div>
</body>
</html>

以上程式碼實現我們想要的功能，當點選按鈕的時候可以實現div的隱藏域顯示，實現過程如下:

一.實現原理:

當點選按鈕的時候，首先判斷div是否處於處於隱藏，如果隱藏則顯示，如果顯示則隱藏，關於按鈕的顯示文字也是根據狀態跟隨調整，一切就這麼簡單。

二.程式碼註釋:

（1）.function toggle(){},宣告一個函式用來處理切換功能。

（2）.if(thediv.style.display=="block"){}，判斷div是否是顯示的。

（3）.thediv.style.display="none"，將div設定為隱藏。

（4）.this.value="顯示"，將按鈕的value屬性值設定為顯示，關於this的用法可以參閱JavaScript的this用法詳解。

（5）.window.onload=function(){}，文件完全載入完成之後，再去執行函式中的程式碼。

（6）.var bt=document.getElementById("bt")，獲取按鈕物件。

（7）.var thediv=document.getElementById("thediv")，獲取div物件。

（8）.bt.onclick=toggle，註冊click事件處理函式，關於事件繫結參閱JavaScript註冊事件處理函式。

相關文章