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