<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height:100%;
background: white;
}
#box{
width:100px;
height:100px;
margin:50px auto
 
;
background: red;
text-align: center;
line-height: 100px;
color:white;
cursor: pointer;
}
</style>

.html

<div id="box">點我啊</div>

.js

<script>
// 操作誰，就要先獲取誰
var oBox = document.getElementById("box");
// 給oBox這個元素綁定一個點擊事件；當點擊這個盒子的時候，觸發後面的function裏面的代碼；
// 獲取body 元素：document.body
 

console.log(document.body);
oBox.onclick = function () {
// 當頁面現在是白色時，讓它變成黑色，
// 如果本來就是黑色，讓它變成白色；
// 獲取
//{style:{background:""}}
var curBg = document.body.style.background;
console.log(curBg);
/* if(curBg=="" || curBg=="white"){
console.log(100);
document.body.style.background = "black";
}else if(curBg=="black"){
console.log(200);
document.body.style.background = "red";
}else if(curBg==="red"){
document.body.style.background = "white";
}
 
*/
switch (curBg){
case "":
document.body.style.background = "black";
break;
case "black":
console.log("red");
document.body.style.background = "red";
break;
case "red":
document.body.style.background = "white";
break;
case "white":
document.body.style.background = "";
break;
}
}
// 黑白
// 紅-->黃色-->藍色--> 黑色-->紅
// 先用if else 在用switch case;
 
</script>

if-else案例–開關燈