尝试在javascript中实现暗/光模式

document.getElementById（“主题更改”）.onclick=function（）{
if（document.body.style.backgroundColor=“#000”）{
document.body.style.backgroundColor=“#f5deb3”；
document.getElementsByTagName（“a”）[0].style.color=“#000”；
document.getElementsByTagName（“a”）[0].style.borderColor=“#000”；
document.getElementById（“主题变化”）.innerText=“轻主题”；
}else if（document.body.style.backgroundColor=“#f5deb3”）{
document.body.style.backgroundColor=“#000”；
document.getElementsByTagName（“a”）[0]。style.color=“#f5deb3”；
document.getElementsByTagName（“a”）[0].style.borderColor=“#f5deb3”；
document.getElementById（“主题变化”）.innerText=“暗主题”；
}
}

---

您需要将原始背景颜色设置为“灯光主题”背景，并将if语句中的

=

更改为

=

。此外，您只需为具有

a

标记的第一个元素设置文本颜色。将代码更改为以下内容：

document.getElementById("theme_change").onclick = function () {
    if (document.body.style.backgroundColor == "#000") {
        document.body.style.backgroundColor = "#f5deb3";
        document.getElementsByTagName("a")[0].style.color = "#000";
        document.getElementsByTagName("a")[0].style.borderColor = "#000";
        document.getElementsByTagName("a")[1].style.color = "#000";
        document.getElementsByTagName("a")[1].style.borderColor = "#000";
        document.getElementById("theme_change").innerText = "Light Theme";
    } else if (document.body.style.backgroundColor = "#f5deb3") {
        document.body.style.backgroundColor == "#000";
        document.getElementsByTagName("a")[0].style.color = "#f5deb3";
        document.getElementsByTagName("a")[0].style.borderColor = "#f5deb3";
        document.getElementsByTagName("a")[1].style.color = "#f5deb3";
        document.getElementsByTagName("a")[1].style.borderColor = "#f5deb3";
        document.getElementById("theme_change").innerText = "Dark Theme";

    }
}

---

代码中几乎没有缺点

document.body.style.backgroundColor

在 “rgb”的格式不是“十六进制”

在

if

语句中使用条件时，请始终使用

=

或

==

而不是

=

因此，此代码应适用于您：

document.getElementById（“主题更改”）.onclick=function（）{
如果（document.body.style.backgroundColor==“”| | document.body.style.backgroundColor===“rgb（0,0,0）”）{
document.body.style.backgroundColor=“#f5deb3”；
document.getElementsByTagName（“a”）[0].style.color=“#000”；
document.getElementsByTagName（“a”）[0].style.borderColor=“#000”；
document.getElementById（“主题变化”）.innerText=“轻主题”；
}else if（document.body.style.backgroundColor==“rgb（245222179）”）{
document.body.style.backgroundColor=“#000”；
document.getElementsByTagName（“a”）[0]。style.color=“#f5deb3”；
document.getElementsByTagName（“a”）[0].style.borderColor=“#f5deb3”；
document.getElementById（“主题变化”）.innerText=“暗主题”；
}
}

=

用于分配。如果要比较值，请使用

==

或

===

。感谢您的快速回复，我已经尝试过了，但使用了“==”或“==”（当然是在If only中）什么都不会发生当你使用

==

时可能什么都不会发生，因为当你第一次点击时背景颜色既不是

\000

也不是

\f5deb3

。我在css规则中将背景设置为#000，所以当我加载我的网页时，背景是#000，我只是将我的代码更改为你编写的东西，谢谢锚定标签的提示，不幸的是什么都没有改变，更糟糕的是按钮根本没有改变背景…谢谢！我在另一篇文章中看到，这个backgroundColor方法返回RGB格式的颜色，但我直接尝试了RGB，但并没有成功。老实说，我不明白为什么if（color==“”）有效。但再次感谢你。很高兴你发现它很有用！if（color==“”）背后的原因是，默认情况下，body的backgroundColor样式始终为空，除非我们为其设置了一些颜色。i、 通过应用CSS或像使用Javascript那样更改属性。我明白了，非常感谢您的解释！