## 概述 DOM把元素抽象成对象,每一个属性就是对象的属性. ## 隐藏盒子 CSS ``` <style> div { height: 300px; width: 300px; background-color: orange; } .show{ display: block; } .hidden{ display: none; } </style> ``` HTML ``` <input type="button" id="btn" value="隐藏"> <div id="box"></div> ``` JS ``` var btn = document.getElementById('btn'); var box = document.getElementById('box'); var btn = document.getElementById('btn'); var isShow = true btn.onclick = function () { if (isShow) { box.className = 'hidden' //这里的className 对应class ,因为js中class是关键字 btn.value = '显示'; isShow = false; } else { box.className = 'show'; btn.value = '隐藏' ; isShow = true; } } ```