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

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