我的 header 中有 js 检查本地存储并相应地设置样式表。我正在使用 Bootstrap 导航栏，我希望导航栏也根据本地存储更改为反色，但我无法让它工作。我认为这是因为导航栏代码在正文中。
下面head部分的代码:
<script>
if (localStorage.getItem("theme") == "light") {
document.getElementById("maincss").href = "./css/main.css";
} else if (localStorage.getItem("theme") == "dark") {
document.getElementById("maincss").href = "./css/dark.css";
} else {
document.getElementById("maincss").href = "./css/main.css";
};
</script>
下面正文部分的代码:
<nav class="navbar navbar-default navbar-fixed-top" id="navbarid">
如果 localStorage 为“暗”，我想使用 Bootstrap 类“navbar-inverse”将导航栏更改为反向导航栏。
我只是不知道如何在页面加载时运行检查本地存储(如在 head 部分)并更改导航类(在 body 部分)的东西。
任何指导表示赞赏。谢谢。
最佳答案
<script> 中的代码标记在页面解析期间有效地就地运行，因此由于它位于头部部分，因此您的导航栏尚未被解析。
您想要的是将您的脚本作为一个函数，例如在文档加载时调用它。
<script>
function checkStorage(){
if (localStorage.getItem("theme") == "light") {
document.getElementById("maincss").href = "./css/main.css";
} else if (localStorage.getItem("theme") == "dark") {
document.getElementById("maincss").href = "./css/dark.css";
} else {
document.getElementById("maincss").href = "./css/main.css";
};
}
</script>
在您的导航栏准备就绪后，可以调用该函数。大多数 javascript 库都提供该功能，例如在 jQuery 中 $(document).ready(checkStorage);就足够了。我敢打赌 bootstrap 也有类似的东西。但我建议您通过尝试使用这些简单的原始解决方案来尝试了解会发生什么:
<nav class="navbar navbar-default navbar-fixed-top" id="navbarid">
<script>checkStorage();</script>
和
<body onload="checkStorage()" >
...
你能预测这两者会发生什么吗？
关于javascript - 根据本地存储中的值更改类属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41780716/