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

Question

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) 并且第二个按钮更改为（浅色主题 -> 深色主题）但不是他的颜色，它保持相同的颜色（#f5deb3），当我再次单击它时什么也没有发生。我尝试更改 JavaScript 文件中行的顺序，以查看是否有什么不同，以便能够看到问题出在哪里，但没有任何改变。浏览器控制台也发生了同样的情况，没有返回任何错误。感谢您的帮助和建议。

Answer 1

您需要将原始背景颜色设置为“浅色主题”背景并将=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";

    }

}

Answer 2

您的代码几乎没有缺点。

document.body.style.backgroundColor 给出格式为“rgb”而不是“hex”的颜色字符串。

在if语句中使用条件时，请始终使用==或===代替=。

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

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>