要求：点击后，body的背景颜色发生改变
思路：点击按钮 button 自定义样式，设置 body 背景颜色 background-color 为 #fff ，定义 一个类名 change，并设置背景颜色 background-color 为 #000 ，获取两个元素 button 和 body ，并注册时间 鼠标点击 onclick ,利用 变量 flag 判断并赋值 类名 className （ flag = 0 或 1 ），（ className = body 或 change ）
具体代码如下：
HTML 和 CSS 代码
<!-- CSS代码 -->
<style>
body {
background-color: #fff;
}
.lamp {
width: 100px;
height: 50px;
}
.lamp button {
padding: 10px;
bottom: 1px solid pink;
font-size: 16px;
}
.change {
background-color: #000;
}
</style>
</head>
<!-- HTML 代码 -->
<body class="body">
<div class="lamp">
<button class="bt">开/关</button>
</div>
JavaScript 代码
<script>
var flag = 0;
var bt = document.querySelector('.bt');
var body = document.querySelector('.body');
bt.onclick = function () {
if (flag == 0) {
body.className = 'change';
flag = 1;
} else {
body.className = 'body';
flag = 0;
}
}
</script>