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