案例1：
当我们在操作div的时候，可以进行删除里面的样式，和添加里面的样式属性等，具体需要有一些逻辑吧！
实例代码：
<body><button id="btn">隐藏Div</button><br><!-- 内联样式，开发中尽量不要这么写，当然特别为难的时候，或者测试的时候也可以写一下 --><div id="box" style="width: 300px;height: 300px;background-color: green;"></div><script>// 获取到button按钮和id为box的divvar box = document.getElementById("box");var btn = document.getElementById("btn");var isShow = true; //定义变量，经常我们会这么写btn.onclick = function () { //定义点击按钮的函数，作用是点击事件后会触发的事情if (isShow) { //如果正确，也是默认进入选择语句box.setAttribute("hidden", true);// this.innerHTML = "显示Div"; btn.innerHTML = "显示Div";isShow = false; //进入后变为false，永远循环，永远触发事件} else {box.removeAttribute("hidden");// 两个方法，随意选择// this.innerHTML = "隐藏div";btn.innerHTML = "隐藏div";isShow = true;}}</script>
</body>效果展示：
案例2：
注意点：我们点击一下事件就进行一次，显示和隐藏一共是两次事件，所以我们需要把flag定义为全局变量，放在点击事件的外面。
实例代码：
<body><button id="btn">隐藏图片</button><br><img src="../../images/1.jpg" alt="" id="imgUrl" width="300px" height="300px"><script>var btn = document.getElementById("btn");var imgUrl = document.getElementById("imgUrl");var flag = 1;btn.onclick = function () {if (flag === 1) {imgUrl.setAttribute("hidden", "true");this.innerHTML = "展示图片";flag = 0;} else if (flag === 0) {imgUrl.removeAttribute("hidden");btn.innerHTML = "隐藏图片";flag = 1;}}</script>
</body>效果展示：
