JavaScript事件实现div显示和隐藏双向切换效果

1.案例需求

• 点击按钮，实现显示和隐藏div模块的双向切换效果

2.编程思路

1. 首先，我们需要获取事件源
2. 其次，注册事件
3. 最后，事件处理程序

3.案例源码

<style>
      .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: none;
      }
    </style>
    <div class="box">我是div模块</div>
    <button>点击</button>

 //1.获取事件源
      let divEle = document.querySelector(".box");
      let bntEle = document.querySelector("button");
      let flag = true;
      //2.注册事件
      bntEle.onclick = function () {
        //3.事件处理程序
        if (flag) {
          bntEle.style.backgroundColor = "blue";
          bntEle.style.color = "white";
          bntEle.style.border = "none";
          divEle.style.display = "block";
          divEle.style.backgroundColor = "yellow";
          divEle.style.color = "red";
          flag = false;
        } else {
          bntEle.style = "none";
          divEle.style = "none";
          flag = true;
        }
      };

4.实现效果

5.技术细节

我们通过定义flag=true，再通过if语句时其进去死循环从而实现显示和隐藏div模块的双向切换效果。