webAPI03-3点击按钮div显示隐藏

最新推荐文章于 2021-12-10 17:37:27 发布

雨乐无穷

最新推荐文章于 2021-12-10 17:37:27 发布

阅读量185

点赞数

分类专栏： JavaScript学习笔记

本文链接：https://blog.csdn.net/qq_43018438/article/details/91566068

版权

JavaScript学习笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击按钮div显示隐藏</title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 300px;
				background-color: orangered;
			}
			.show{
				display: block;
			}
			.hidden{
				display: none;
			}
		</style>
	</head>
	<body>
		<input type="button"  id="btn" value="隐藏" />
		<div id="box"></div>
		
		
		<script type="text/javascript">
			//1.获取元素
			
			var btn = document.getElementById('btn');
			var box = document.getElementById('box')
			
			//isShow 记录了box的状态，true 显示 ，false 隐藏
			var isShow = true;
			
			//给按钮注册事件
			btn.onclick = function(){
				
				if(isShow){
					//DOM对象的对应的标签的class属性的名字叫做className，
					//因为class在js中是关键字，关键字不可以作为变量或者属性的名字
					box.className = 'hidden';
					this.value = '显示';
					isShow = false;
				}else{
					box.className = 'show';
					this.value = '隐藏';
					isShow = true;
				}
			}
			
			
			
		</script>
		
	</body>
</html>

雨乐无穷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webAPI03-3点击按钮div显示隐藏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点击按钮div显示隐藏</title> <style type="text/css"> #box{ width: 200px; height: 300px; ...
复制链接

扫一扫