.style.color don'；不要更改JavaScript中元素的颜色

我想将暗模式添加到我的站点，因此我使用css创建了一个HTML文件（在“白色模式”下），然后添加了一个按钮（属性为onclick=“enableDarkMode（）”），并定义了如下函数：

function enableDarkMode（）{
如果（document.body.style==“背景色：黑色；”）{
//禁用暗模式
}否则{
document.body.style=“背景色：黑色；”
from（document.getElementsByTagName（“a”））.forEach（e=>{
e、 style.color=“白色”
});
document.getElementsByTagName（“h1”）[0].style.color=“白色”
document.getElementsByTagName（“img”）[0].style=“盒影：0px 4px 6px 2px#404040
}
}

当我运行所有操作并单击“启用暗模式”时，它只会更改背景，并且不会将文本颜色变为白色，即使它们具有属性style=“color:white；”

---

下面是完整的代码：

您的问题是您正在使用

覆盖此
的颜色！重要信息

在css中

如果检查元素并单击“计算”，则可以看到颜色的来源。如果你切换黑暗模式，你可以看到白色的存在，但它有一条线通过它。没有线路通过的那个就是正在使用的那个

如果您删除，它似乎工作良好！来自css的重要信息（两个实例）

作为一般的经验法则，尽量不要使用重要的东西，因为你可能会遇到这样的问题。在某些情况下是必要的，但不是很多。

function enableDarkMode（）{
如果（document.body.style==“背景色：黑色；”）{
//禁用暗模式
}否则{
document.body.style=“背景色：黑色；”
from（document.getElementsByTagName（“a”））.forEach（e=>{
e、 设置属性（“颜色”、“白色”、“重要”）；
});
document.getElementsByTagName（“h1”）[0].style.color=“白色！重要”
document.getElementsByTagName（“img”）[0].style=“盒影：0px 4px 6px 2px#404040
}
}

。暗模式{
位置：绝对位置；
排名：0；
右：0；
字体大小：13px；
}
.关于{
边缘底部：80px；
}
.文本中心{
文本对齐：居中；
}
.个人资料图片{
盒影：0px 4px 6px 2px浅灰色；
边界半径：50%；
}
img{
垂直对齐：中间对齐；
}
img{
边界：0；
}
h1，
h2，
h3，
h4，
h5，
a{
颜色：#4A4E69！重要；
字体大小：300；
字体系列：“开放式Sans”，无衬线；
}
a:悬停{
过渡时间：0.5s；
颜色：#d1d3e2！重要；
}
a:不（：悬停）{
过渡时间：0.5s；
颜色：#4A4E69！重要；
}
.h1，
h1{
字体大小：36px；
}

阿诺赫索
,
,
,


,
,
,
启用暗模式

h1

标签颜色设置为

#4A4E69！重要的。
您应该设置
！重要信息
，以覆盖此设置

指

请阅读。当外部资源消失或固定时，依赖外部资源理解的问题将变得无用。创建一个问题，并将其放在问题本身中。Stackoverflow支持为什么用JavaScript修改元素？为依赖于
或
元素上的类的“暗模式”添加样式表：
body.dark{background color:black；}body.dark a{color:white}…
，或完全交换样式表。。。
document.getElementsByTagName("h1")[0].style.setProperty("color", "white", "important")