时间戳

首页 > 解决方案 > 我可以在 JavaScript 中更改 CSS 属性的值吗？

javascript - 我可以在 JavaScript 中更改 CSS 属性的值吗？

问题描述

我的网站需要颜色主题。所以我打算做的是在 CSS 中创建一个类，

#box {
    width: 500px;
    height: 300px;
}
.color1 {
    background-color: rgb(105, 105, 105);
}

将其应用于我的 HTML div 元素，

<div class="color1" id="box">
    <button id="darkModeButton">Dark Mode</button>
</div>

<div class="color1">
</div>

<div class="color1">
</div>

然后当单击按钮时，更改所有具有类 color1 的元素的颜色，

var darkModeButton = document.querySelector("#darkModeButton");

darkModeButton.onclick = function() {
    //something like this:
    color1.backgroundColor = "rgb(55, 55, 55)";
    //but obiviously this doesn't work so how can i fix this
}

标签： javascriptcsscolorsonclickbackground-color

解决方案

只需在 body 上切换一个类并使用不同的 CSS 规则。

var darkModeButton = document.querySelector("#darkModeButton");

darkModeButton.addEventListener("click", function() {
   document.body.classList.toggle("darkmode");
});
#box {
    width: 500px;
    height: 300px;
}
.color1 {
    background-color: rgb(105, 105, 105);
}

.darkmode .color1 {
  background-color: black;
}
<div class="color1" id="box">
    <button id="darkModeButton">Dark Mode</button>
</div>

<div class="color1">
</div>

<div class="color1">
</div>

推荐阅读