如何實現javascript點擊按鈕隱藏div

本篇內容主要講解“如何實現javascript點擊按鈕隱藏div”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何實現javascript點擊按鈕隱藏div”吧!

方法：1、用“按鈕對象.onclick=function(){}”語句給按鈕綁定點擊事件處理函數；2、處理函數中，添加“div對象.style.display="none"”語句；3、點擊按鈕會觸發處理函數，執行其中的語句即可隱藏div。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript實現點擊按鈕隱藏div

根據id 按鈕獲取點擊事件，添加事件處理函數

<input type="button" value="隱藏" id="btn"/>
<!--<input type="button" value="顯示" id="btn1"/>-->
<div id="dv"></div>
<script>
	function my(id){
		return document.getElementById(id);
	}
	my("btn").onclick=function(){
			my("dv").style.display="none";
	}
</script>

復雜一點，如果div是顯示的，點擊按鈕可隱藏；如果div是隱藏的，點擊按鈕可顯示。

<input type="button" value="隱藏" id="btn"/>
<!--<input type="button" value="顯示" id="btn1"/>-->
<div id="dv"></div>
<script>
	function my(id){
		return document.getElementById(id);
	}
	my("btn").onclick=function(){
		if (this.value =="隱藏") {
			my("dv").style.display="none";
			this.value="顯示";
		} else if(this.value =="顯示"){
			my("dv").style.display="block";
			this.value="隱藏";
		}
	}
</script>

到此，相信大家對“如何實現javascript點擊按鈕隱藏div”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！