JavaScript點選一個按鈕隱藏和顯示div
阿新 • • 發佈：2019-01-25
本章節通過程式碼例項介紹一下如何實現點選同一按鈕實現一個元素的顯示和隱藏效果。
此效果還是比較實用的，比如點選按鈕可以實現一個功能模組的顯示或者隱藏。
下面就通過程式碼例項介紹一下如何實現此功能。
程式碼例項如下:
| 01020304050607080910111213141516171819202122232425262728293031323334 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>點選一個按鈕隱藏和顯示div</title><style type="text/css">#thediv{width:200px;height:50px;background:#ccc;}</style><script type="text/javascript">window.onload=function(){var obt=document.getElementById("bt");var odiv=document.getElementById("thediv");obt.onclick=function(){if(odiv.style.display=="none"){odiv.style.display="block";obt.value="隱藏模組";}else{odiv.style.display="none";obt.value="顯示模組";}}}</script><body><input type="button" id="bt" value="顯示模組"/><div id="thediv" style="display:none"></div></body></html> |
上面的程式碼實現了我們的要求，點選按鈕可以實現切換效果。