JavaScript——简单的元素对象控制：点击切换div背景色

最新推荐文章于 2022-06-23 21:04:57 发布

Melonico

最新推荐文章于 2022-06-23 21:04:57 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript JavaScript小案例文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_45852430/article/details/106947257

版权

JavaScript 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

JavaScript小案例

7 篇文章 0 订阅

订阅专栏

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>