JavaScript

您所在的位置：网站首页 › js按钮点击后变色 › JavaScript

JavaScript

2024-07-14 12:25| 来源: 网络整理| 查看: 265

1. 创建一个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; } }

完整代码

点击切换div背景色 // 获取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; } }

【本文地址】

JavaScript

JavaScript

今日新闻

推荐新闻