原创
JavaScript——简单的元素对象控制：点击切换div背景色
1. 创建一个div标签并设置大小和背景色
<div id="d1" style="height: 50px;width: 50px;background-color: gray"></div>
2. 获取div对象
var div = document.getElementById("d1");
3. 给div对象绑定事件
div.onclick = function () {
div.style.backgroundColor = "yellow";
}
4. 添加一个flag，使得div可以来回切换颜色
var flag = true; // true代表div为灰色
5. 在绑定事件中添加判断
div.onclick = function () {
if (flag){
div.style.backgroundColor = "yellow";
flag = false;
} else {
div.style.backgroundColor = "gray";
flag = true;
}
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击切换div背景色</title>
</head>
<body>
<div id="d1" style="height: 50px;width: 50px;background-color: gray"></div>
<script>
// 获取div对象
var div = document.getElementById("d1");
// 设置flag判断当前颜色
var flag = true;
// 绑定事件
div.onclick = function () {
if (flag){ //当前颜色为灰色
div.style.backgroundColor = "yellow"; // div改为黄色
flag = false;
} else { // 当前颜色为黄色
div.style.backgroundColor = "gray"; // div改为灰色
flag = true;
}
}
</script>
</body>
</html>
JavaScript
JavaScript案例
赞
- 作者：Melonico
- 发表时间：2021-03-15 15:50
- 更新时间：2021-03-15 15:53
评论