时间戳

首页 > 解决方案 > 尝试在 javascript 中实现暗/亮模式

javascript - 尝试在 javascript 中实现暗/亮模式

问题描述

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.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.getElementById("theme_change").innerText = "Dark Theme";

    }
}
<div id="buttons">
            <a href="#" id="color_change" class="btn">Change Color</a>
            <a href="#" id="theme_change" class="btn">Light Theme</a>
       </div>

我是 JavaScript 新手，出于某些原因，我需要创建一个切换按钮来更改我的网页主题。

我正在使用 document.getElementById 和 getElementByTagName 这样做。

但我的问题是，当我单击一次按钮时，只有背景发生变化，只有一个按钮的颜色发生变化。当我再次单击应该在主题之间切换的按钮时，什么也没有发生。

在这个页面上，我有两个按钮可以改变页面上的一些颜色，第一个效果非常好，所以我不知道为什么第二个没有。

如前所述，我可以单击一次theme_changer 按钮，当我单击它时，背景会发生变化（#000 -> #f5deb3），第一个按钮的颜色会变为（#f5deb3 -> #000）并且文本第二个按钮变为（Light Theme -> Dark Theme）但不是他的颜色，它保持相同的颜色（#f5deb3），当我再次点击它时没有任何反应。

我尝试更改 JavaScript 文件中的行顺序以查看是否有不同之处，以便能够查看问题可能出在哪里，但没有任何改变。浏览器控制台也发生了同样的情况，它没有返回任何错误。

感谢您的帮助和建议。

标签： javascripthtmlcolorsonclick

解决方案

您的代码几乎没有缺点。

  1. document.body.style.backgroundColor给出格式为“rgb”而不是“hex”的颜色字符串.
  2. 在if语句中使用条件时，始终使用==or===代替=.

因此，此代码应该适合您：

document.getElementById("theme_change").onclick = function () {
if (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("theme_change").innerText = "Light Theme";
} else if (document.body.style.backgroundColor === "rgb(245, 222, 179)") {
    document.body.style.backgroundColor = "#000";
    document.getElementsByTagName("a")[0].style.color = "#f5deb3";
    document.getElementsByTagName("a")[0].style.borderColor = "#f5deb3";
    document.getElementById("theme_change").innerText = "Dark Theme";

}
}
<div id="buttons">
            <a href="#" id="color_change" class="btn">Change Color</a>
            <a href="#" id="theme_change" class="btn">Light Theme</a>
       </div>

推荐阅读