Question

我一直在制作一个带有默认“亮模式”和暗模式按钮的小型站点，以将其更改为夜间用户使用的暗模式。我想使用JS中的localStorage来使暗模式保持不变，因此当您按一下它并转到站点上的另一页时，它将保持暗模式。但我似乎无法使其正常工作。

当我将localStorage键的“模式”设置为“暗”时，当我转到该站点的另一个页面时，它默认为亮模式。

这是js代码：

let mode;
mode = localStorage.getItem('mode');

if (mode = 'light'){
    lightMode();
}else{
    darkMode();
}

function darkMode() {
    document.getElementById("title").style.color = "white";
    document.body.style.backgroundColor = "#040040";
    //code...
    document.getElementById("darkmodebtn").style.color = "black";
    document.getElementById("darkmodebtn").style.backgroundColor = "white";
    document.getElementById("darkmodebtn").onclick = lightMode;
    document.getElementById("darkmodebtn").innerHTML = "Light Mode";
    localStorage.setItem('mode', 'dark');
    mode = localStorage.getItem('mode');
}

function lightMode() {
    document.getElementById("title").style.color = "black";
    document.body.style.backgroundColor = "lightblue";
    //more code...
    document.getElementById("darkmodebtn").style.color = "white";
    document.getElementById("darkmodebtn").style.backgroundColor = "black";
    document.getElementById("darkmodebtn").onclick = darkMode;
    document.getElementById("darkmodebtn").innerHTML = "Dark Mode";
    localStorage.setItem('mode', 'light');
    mode = localStorage.getItem('mode');
}

这是按钮的html：

<div id="darkmode">
    <button id="darkmodebtn" onclick="darkMode()">Dark Mode</button>
</div>

打开网站上的任何页面时都会出现一个错误，即：

Uncaught TypeError: Cannot read property 'style' of null
    at lightMode (script.js:79)
    at script.js:57

哪个描述了lightMode函数的第一行中的错误，但我不知道这是否是问题的一部分。

Answer 1

问题出在这一行：

if (mode = 'light')

mode = 'light'是一个赋值，在模式变量中存储“ light”。但出于if语句的目的，它也是一个表达式，其计算结果为“ light”，if解释为true。因此，您将始终处于灯光模式。

if (mode === 'light')是您想要的。

Answer 2

要检查条件是true还是false，必须使用===进行比较。

if (mode === 'light'){
    lightMode();
}else{
    darkMode();
}

要修复错误Uncaught TypeError: Cannot read property 'style' of null，

您应该在生成所有DOM之后放置代码，

例如：

<html>
    <head></head>
    <body>
        <div id="title"></div>
        <script>
            // place your code here!
        </script>
    </body>
</html>

Answer 3

您可以将两个单独的CSS文件用于不同的模式。

if(lightmode===true) {
  document.getElementById("stylesheet").setAttrubute("href","light.css");}
else {
  ...//else block
}

有没有一种方法可以通过使用本地存储来保持恒定的“暗模式”？

3 个答案: