Question

我有一个切换按钮和一个脚本，可以在样式表之间进行切换，但是我不知道如何存储切换状态

我知道有很多这样的问题，但是没有一个问题使用带2个样式表的切换和本地存储（而是css变量或其他东西，我的css太糟了，无法使这些工作）。我是一位具有HTML / CSS知识的UI设计师，几乎没有时间学习JS。

<link id="theme" rel="stylesheet" type="text/css" href="default.css" />


<input type="checkbox" id="tog"/>
<label for="tog" class="toggle" onclick="toggle()"></label>   


<script type='text/javascript'>
function toggle() {
  var el = document.getElementById("theme");
  if (el.href.match("default.css")) {
    el.href = "dark.css";    
  }
  else {
    el.href = "default.css";  
  }
}
</script>

这很好用，但是我需要保存切换开关，因此刷新后不会变回原来的状态。从我所读的内容来看，它是使用本地存储完成的，但超出了我的范围。

我在这里看到带有每种样式的多个链接/按钮的示例，但我无法使其适应切换。我试过了。你能帮忙吗？

Answer 1

赞：

function toggle(theme) {
  var styleSheet = document.getElementById("theme");
  if (theme != styleSheet.href) styleSheet.href = theme;
  document.getElementById("tog").checked = styleSheet.href === "dark.css";
}
window.addEventListener("load",function() {
  var theme = localStorage.getItem("theme") || document.getElementById("theme").href;
  toggle(theme);
  document.getElementById("tog").addEventListener("change",function() {
    var theme = this.checked ? "dark.css" : "default.css"
    toggle(theme);  
    localStorage.setItem("theme",theme);
  })
})

<link id="theme" rel="stylesheet" type="text/css" href="default.css" />


<label>Toggle to dark theme <input type="checkbox" id="tog"/></label>

Answer 2

<script>

    function toggle() {
        var el = document.getElementById("theme");
        var theme = (el.href === 'default.css') ? 'dark.css' : 'default.css';
        el.href = theme;
        localStorage.setItem('theme', theme);
    }

    function defaultTheme() {
        var el = document.getElementById('theme');
        var theme = localStorage.getItem('theme');

        if (theme) {
            el.href = theme
        }
    }

    defaultTheme();

</script>

使用本地存储在2个样式表之间切换（一个切换）

2 个答案: