我有一个切换器和一个在样式表之间切换的脚本，但我不知道如何存储切换状态
我知道有多个这样的问题，但没有一个问题使用切换和本地存储以及 2 个样式表(而是 css 变量或其他东西，我的 css 是一团糟，无法使这些工作正常进行)。我是一名 UI 设计师，对 HTML/CSS 有一些了解，但我几乎没有时间学习 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>
这很好用，但我需要保存切换，这样刷新后它就不会变回来。从我读过的内容来看，它是用本地存储完成的，但它超出了我的范围。
我在这里看到示例，每种样式都有多个链接/按钮，但我无法使它们适应切换。我试过了。你能帮忙吗？
最佳答案
像这样:
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>
关于javascript - 使用本地存储在 2 个样式表之间切换(一次切换)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58079581/