Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie das Ausblenden von Div-Schaltflächen in Javascript

So implementieren Sie das Ausblenden von Div-Schaltflächen in Javascript

藏色散人
藏色散人Original
2021-07-17 11:43:582531Durchsuche

javascript实现按钮隐藏div的方法:首先创建一个前台示例文件;然后根据id按钮获取点击事件;最后添加事件处理函数即可。

So implementieren Sie das Ausblenden von Div-Schaltflächen in Javascript

本文操作环境:windows7系统、javascript1.8.5&&html5版,DELL G3电脑

JavaScript点击按钮隐藏和显示div方法

根据id 按钮获取点击事件,添加事件处理函数
效果:
So implementieren Sie das Ausblenden von Div-Schaltflächen in Javascript
So implementieren Sie das Ausblenden von Div-Schaltflächen in Javascript

<style>
		#dv{
			width: 100px;
			height: 100px;
			background-color: royalblue;
		}
	</style>
	<body>
		<input type="button" value="隐藏" id="btn"/>
		<!--<input type="button" value="显示" id="btn1"/>-->
		<p id="dv"></p>
		<script>
			function my(id){
				return document.getElementById(id);
			}
			//第一种方法
			/*my("btn").onclick=function(){
				my("dv").style.display="none";
			}
			my("btn1").onclick=function(){
				my("dv").style.display="block";
			}*/
			//第二种方法
			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>
	</body>

推荐学习:《javascript高级教程

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Ausblenden von Div-Schaltflächen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn