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

Question

我想在我的网站上添加深色模式，所以我创建了一个 HTML 文件 css （在“白色模式”下），然后我添加了一个按钮（具有属性onclick="enableDarkMode()") 并定义函数如下：

function enableDarkMode() {
    if (document.body.style === "background-color: black;") {
        // disable dark mode
    } else {
        document.body.style = "background-color: black;"
        Array.from(document.getElementsByTagName("a")).forEach(e => {
            e.style.color = "white"
        });
        document.getElementsByTagName("h1")[0].style.color = "white"
        document.getElementsByTagName("img")[0].style = "box-shadow: 0px 4px 6px 2px #404040;"
    }
}

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

完整代码如下：https://codepen.io/anonhexo/pen/WNGmevq

Answer 1

您的问题是您在 css.

中使用 !important 覆盖了此 <a> 的颜色

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

如果您从 css（两个实例）中删除 !important，它似乎工作正常

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

Answer 2

    function enableDarkMode() {
        if (document.body.style === "background-color: black;") {
            // disable dark mode
        } else {
            document.body.style = "background-color: black;"
            Array.from(document.getElementsByTagName("a")).forEach(e => {
              
              e.style.setProperty("color", "white", "important");

            });
            document.getElementsByTagName("h1")[0].style.color = "white !important"
            document.getElementsByTagName("img")[0].style = "box-shadow: 0px 4px 6px 2px #404040;"
        }
    }

.dark-mode {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 13px;
        }

        .about {
            margin-bottom: 80px;
        }

        .text-center {
            text-align: center;
        }

        .profile-pic {
            box-shadow: 0px 4px 6px 2px lightgrey;
            border-radius: 50%;
        }

        img {
            vertical-align: middle;
        }

        img {
            border: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        a {
            color: #4A4E69 !important;
            font-weight: 300;
            font-family: 'Open Sans', sans-serif;
        }

        a:hover {
            transition-duration: 0.5s;
            color: #d1d3e2 !important;
        }

        a:not(:hover) {
            transition-duration: 0.5s;
            color: #4A4E69 !important;
        }

        .h1,
        h1 {
            font-size: 36px;
        }

<html>

<head>
    <title>AnonHexo</title>
    <a class="dark-mode" style="text-decoration:none" onclick="enableDarkMode()">Enable Dark Mode</a>
</head>

<body>
    <section class="about">
        <div class="text-center" style="margin-top:100px"> <img
                src="https://avatars1.githubusercontent.com/u/61375258?v=4" width="200" class="profile-pic">
            <h1>AnonHexo, Italy</h1>
            <div class="socialLinks">
                <a href="https://www.github.com/AnonHexo" style="text-decoration:none" target="_blank">GitHub</a>,
                <a href="https://www.whosebug.com/users/13221104/anonhexo?" style="text-decoration:none"
                    target="_blank">Stack Overflow</a>,
                <a href="https://codepen.io/anonhexo" style="text-decoration:none" target="_blank">Codepen</a>,
                <br>
                <a href="https://www.youtube.com/channel/UCnnqMGII7LHvvn1LUiU55eg" style="text-decoration:none"
                    target="_blank">YouTube</a>,
                <a href="https://www.instagram.com/jacky.trave" style="text-decoration:none"
                    target="_blank">Instagram</a>,
                <a href="https://www.reddit.com/u/AxonHexo" style="text-decoration:none" target="_blank">Reddit</a>,
                <a href="https://www.twitch.tv/AnonHexo" style="text-decoration:none" target="_blank">Twitch</a>
  
            </div>
            <!-- <h5>Young 12 y/o back-end developer.</h5>
            <div class="text-center" style="margin:20px"> <a href="mailto:" class="" target="_blank"> </a> </div> -->
        </div>
    </section>
  <button onclick="enableDarkMode()">
    enable dark mode
  </button>
</body>
</html>

您 css 的 a 元素覆盖了您给出的新命令。

您的 css 包含：

a:not(:hover) {
    transition-duration: 0.5s;
    color: #4A4E69 !important;
}

如果您希望所有 a 元素都是白色的，您应该这样做：

e.style.setProperty("color", "white", "important");

Answer 3

h1 标签颜色设置为 #4A4E69 !important;。您应该设置 !important 来覆盖它。

参考setProperty()

document.getElementsByTagName("h1")[0].style.setProperty("color", "white", "important")

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

.style.color don't change the color of an element in JavaScript

html

javascript

css

styles

darkmode