Question

我的标题中有js检查本地存储并相应地设置样式表。我正在使用Bootstrap导航栏，我希望导航栏也可以根据本地存储更改为反色，但我无法使其工作。我认为这是因为导航栏代码在正文中。

以下主题部分的代码：

<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为“dark”，我想使用bootstrap类“navbar-inverse”将导航栏更改为navbar inverse。

我无法弄清楚如何在页面加载上运行一些检查localstorage的内容（如在head部分中）并更改nav类（在body部分中）。

任何指导意见。感谢。

Answer 1

为什么不用类似

的类来分配类

document.getElementById("navbarid").className += "navbar-inverse"

并在其他情况下将其删除

document.getElementById("navbarid").className.replace
  ( /(?:^|\s)MyClass(?!\S)/g , '' )

检查其他类代码示例的链接： Change an element's class with JavaScript

Answer 2

<script>标记中的代码在解析页面时有效地就地运行，因此，由于它位于head部分，因此您的导航栏尚未被解析。

你想要的是将你的脚本作为一个函数，例如在文档加载时调用它。

<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()" >
...

你能预测这两种情况会发生什么吗？

根据本地存储中的值更改类属性

2 个答案: