Bagaimana untuk menyembunyikan div dengan mengklik butang dalam javascript

Kaedah: 1. Gunakan pernyataan "button object.onclick=function(){}" untuk mengikat fungsi pemprosesan acara klik pada butang 2. Dalam fungsi pemprosesan, tambahkan "div object.style. display="none "" statement; 3. Mengklik butang akan mencetuskan fungsi pemprosesan, dan melaksanakan pernyataan di dalamnya akan menyembunyikan div.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Javascript mengimplementasikan mengklik butang untuk menyembunyikan div

Dapatkan acara klik mengikut butang id dan tambah fungsi pengendali acara

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

Rendering:

Ia agak rumit jika div dipaparkan, klik butang untuk menyembunyikannya, klik butang untuk memaparkannya.

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

Rendering:

[Pembelajaran yang disyorkan: tutorial lanjutan javascript]

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan div dengan mengklik butang dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!