要实现的思路和功能
- 1.默认页面是白色的（开灯状态），按钮显示的文字是关灯
- 2.点击按钮
- 1）获取当前开关灯的状态（看BODY的背景颜色）
- 2）如果当前是开灯状态（BODY的背景颜色是白色），我们让BODY背景颜色变为黑色（关灯状态），按钮中显示开灯
- 3）如果当前是关灯状态（BODY的背景颜色是黑色），我们让BODY背景颜色变为白色（开灯状态），按钮中显示关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开关灯案例</title>
</head>
<style>
html,body{
height:100%;
overflow: hidden;
}
button{
width:60px;
padding:20px auto;
line-height:32px;
}
</style>
<body style="background-color:white;">
<button id="btnBox">关灯</button>
<script>
//1.想要操作谁就先获取谁
let btn=document.getElementById("btnBox");
let body=document.body;
//2.点击按钮要做的事情
btn.onclick=function () {
let bg=body.style.backgroundColor;
if(bg==="white"){
body.style.backgroundColor="black";
btn.innerText="开灯";
}else{
body.style.backgroundColor="white";
btn.innerText="关灯";
}
}
</script>
</body>
</html>
