JavaScriptでボタンをクリックしてdivを非表示にする方法

方法: 1. 「button object.onclick=function(){}」ステートメントを使用して、クリック イベント処理関数をボタンにバインドします。2. 処理関数に、「div object.style. display="none "" state; 3. ボタンをクリックすると処理関数がトリガーされ、その中のステートメントを実行すると div が非表示になります。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.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 上級チュートリアル]

以上がJavaScriptでボタンをクリックしてdivを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。