-2

我想将暗模式添加到我的网站，所以我用 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

4

3 回答 3

3

您的问题是您<a>通过!important在 css 中使用来覆盖它的颜色。

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

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

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

于 2021-01-19T09:11:18.347 回答
1 

    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>

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

你的CSS包含：

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

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

e.style.setProperty("color", "white", "important");
于 2021-01-19T09:12:12.547 回答
1

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

参考setProperty()

document.getElementsByTagName("h1")[0].style.setProperty("color", "white", "important")
于 2021-01-19T09:12:41.757 回答