如何在JavaScript中使用click事件反复更改div的背景样式？
我正在尝试使用javascript和CSS将日历上每一天的background属性在蓝色和绿色之间进行更改。比如切换功能。默认的颜色是蓝色，我已经设法使每一天都变成绿色，当点击，但我不知道如何改变他们回到蓝色。
这是我试过的。
null
js lang-js prettyprint-override">const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e) {
if (e.target.style.background != 'linear-gradient(#7ce8b6, #00ff2a)') {
e.target.style.background = 'linear-gradient(#7ce8b6, #00ff2a)'
} else if (e.target.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
e.target.background = 'linear-gradient(#7CB9E8, #00FFFF)'
}
});
}
.day {
height: 10em;
width: 100px;
padding: 1em;
border: 5px solid rgb(29, 29, 116);
border-radius: 1em;
background: linear-gradient(#7CB9E8, #00FFFF);
}<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>null
共有2个答案
} else if (e.target.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
e.target.background = 'linear-gradient(#7CB9E8, #00FFFF)'
}
可能需要更改为：
} else if (e.target.style.background != 'linear-gradient(#7CB9E8, #00FFFF)') {
e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)'
}
以便它与第一个if语句相同。我还没有能够模拟代码，但是，只要从逻辑上通读它，我就发现了这个可能的错误。
编辑：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.day {
height: 10em;
width: 100px;
padding: 1em;
border: 5px solid rgb(29, 29, 116);
border-radius: 1em;
background: linear-gradient(#7CB9E8, #00FFFF);
}
</style>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<script>
const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e) {
alert(e.target.style.background);
if (e.target.style.background != 'linear-gradient(rgb(124, 232, 182), rgb(0, 255, 42))') {
e.target.style.background = 'linear-gradient(#7CE8B6, #00FF2A)';
} else {
e.target.style.background = 'linear-gradient(#7CB9E8, #00FFFF)';
}
});
}
</script>
</body>
</html>
在测试时，我的浏览器检测到的颜色为RGB，因此，通过将十六进制值更改为RGB范围，它现在会变回来
定义一个具有绿色背景颜色样式的CSS类，使用javascript，只需在每个div元素上切换该类。
null
const days = document.getElementsByClassName('day');
for (let i = 0; i < days.length; i++) {
days[i].addEventListener('click', function(e) {
days[i].classList.toggle("green");
});
}.day {
height: 30px;
width: 30px;
padding: 1em;
border: 5px solid rgb(29, 29, 116);
border-radius: 1em;
background: linear-gradient(#7CB9E8, #00FFFF);
}
.green {
background: linear-gradient(#7ce8b6, #00ff2a);
}html lang-html prettyprint-override"><div class="day">1</div>
<div class="day">2</div>-
问题内容： 有谁知道使用JavaScript交换网页背景色的简单方法？ 问题答案： 修改JavaScript属性。 例如： 注意：这确实取决于页面的组合方式，例如，如果您使用的背景颜色不同的DIV容器，则需要修改其背景颜色而不是文档主体。
-
我已经尝试了我能找到的任何东西，基本上总的想法是使用以下css规则： 问题是，唯一起作用的规则是大纲。背景不会以任何方式改变。它仍然是灰色的。我提供了上面发布的css规则的结果的屏幕截图。 有什么工作方法可以成功地更改禁用复选框的背景颜色吗？
-
我不知道为什么这个代码不能工作！为什么显示警报空白？ 当点击div时，div的背景颜色应该写在输入框中，并且也显示在警报中。
-
问题内容： 您好，我想做的就是更改复选框的背景颜色。我累了很多事情，但是什么都没用。可以帮忙吗？ 问题答案： 我总是使用伪元素并用于更改复选框和单选按钮的外观。它的工作就像一种魅力。 脚步 使用诸如或或等的CSS规则隐藏默认复选框。 使用element 创建一个伪造的复选框，并传递一个空白或不间断的空格； 复选框处于状态时，传递unicode ，即选中标记； 添加样式以使复选框可访问。 完成了 这
-
问题内容： 我正在尝试将 鼠标悬停在div的背景颜色上 。 div {background：white;} div a：hover {background：grey; 宽度：100％; 显示：块; 文字修饰：无；} 只有 div内的 链接 获得背景色 。 如何使 整个div获得该背景色？ 谢谢 编辑： 如何使整个div充当链接-当您单击该div上的任意位置时，将您带到某个地址。 问题答案： 当鼠标
-
我没有使用 CSS3。所以我不能使用或属性。如果不使用这些属性，如何使 透明？它应该是此链接中的文本框示例。此处的文本框背景色是透明的。我想做同样的事情，但不使用上面提到的属性。