方法:1.利用display屬性,語法「div物件.style.display="none|block"」;2、利用visibility屬性,語法「div物件.style.visibility="hidden|visible" 」。
本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
<div id="demo">AAA</div>
JS隱藏和顯示div的方式有兩種:
方式1:隱藏後釋放佔用的頁面空間
透過設定display屬性可以讓div隱藏後釋放所佔用的頁面空間.
style="display: none;"
document.getElementById("demo").style.display="none";//隐藏 document.getElementById("demo").style.display="block";//显示
方式2:隱藏後仍佔有頁面空間,顯示空白
div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白.
style="visibility: none;"
document.getElementById("demo").style.visibility="hidden";//隐藏 document.getElementById("demo").style.visibility="visible";//显示
注意:
使用第二方式比較人性化,但是,用div.style.display= "none"
隱藏會引起,div裡面的東西休眠,裡面的事件就不回應了。
【推薦學習:javascript高階教學】
#以上是javascript怎麼顯示隱藏div的詳細內容。更多資訊請關注PHP中文網其他相關文章!