JavaScriptでボタンをクリックしてdivを非表示にする方法-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-10-09 12:09:35

オリジナル

7536 人が閲覧しました

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

JavaScriptでボタンをクリックして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>

ログイン後にコピー

レンダリング:

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

少し複雑で、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を非表示にする方法