.style.color 不会改变 JavaScript 中元素的颜色答案

【问题标题】：.style.color don't change the color of an element in JavaScript.style.color 不会改变 JavaScript 中元素的颜色
【发布时间】：2021-04-23 13:30:21
【问题描述】：

我想为我的网站添加深色模式，所以我用 css 创建了一个 HTML 文件（在“白色模式”下），然后我添加了一个按钮（属性 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;"
    }
}

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

这里是完整代码：https://codepen.io/anonhexo/pen/WNGmevq

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源来理解的问题变得毫无用处。创建一个minimal reproducible example 并将其放入问题本身。 Stackoverflow 确实支持inline live demos
为什么要用 JavaScript 修改元素？为依赖于<body> 或<html> 元素上的类的“暗模式”添加样式表：body.dark { background-color: black; } body.dark a { color: white } ...，或者完全交换样式表，...

标签： javascript html css styles darkmode

【解决方案1】：

您的问题是您在 css 中使用 !important 覆盖了此 <a> 的颜色。

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

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

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

【讨论】：

【解决方案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.stackoverflow.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>

a 元素的 css 会覆盖您提供的新命令。

你的 CSS 包含：

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

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

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

【讨论】：

【解决方案3】：

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

参考setProperty()

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

【讨论】：