1.案例需求
- 点击按钮,实现显示和隐藏div模块的双向切换效果
2.编程思路
- 首先,我们需要获取事件源
- 其次,注册事件
- 最后,事件处理程序
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模块的双向切换效果。