如何實(shí)現(xiàn)javascript點(diǎn)擊按鈕隱藏div

本篇內(nèi)容主要講解“如何實(shí)現(xiàn)javascript點(diǎn)擊按鈕隱藏div”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何實(shí)現(xiàn)javascript點(diǎn)擊按鈕隱藏div”吧!

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

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript實(shí)現(xiàn)點(diǎn)擊按鈕隱藏div

根據(jù)id 按鈕獲取點(diǎn)擊事件，添加事件處理函數(shù)

<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>

復(fù)雜一點(diǎn)，如果div是顯示的，點(diǎn)擊按鈕可隱藏；如果div是隱藏的，點(diǎn)擊按鈕可顯示。

<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>

到此，相信大家對(duì)“如何實(shí)現(xiàn)javascript點(diǎn)擊按鈕隱藏div”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！