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

【问题标题】：Change class attribute depending on value in local storage根据本地存储中的值更改类属性
【发布时间】：2025-10-18 00:30:03
【问题描述】：

我的标题中有 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 为“dark”，我想使用引导类“navbar-inverse”将导航栏更改为反向导航栏。

我只是不知道如何在页面加载时运行检查本地存储（如在 head 部分中）并更改导航类（在 body 部分中）的东西。

任何指导表示赞赏。谢谢。

【问题讨论】：

标签： javascript html css twitter-bootstrap class

【解决方案1】：

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

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

【讨论】：

谢谢。我得到了 checkStorage() 函数部分。在我尝试实现它之前，回答你的问题，我认为脚本将在第一个导航栏加载后检查本地存储。所以我将能够添加代码来更改函数中的类。在第二个中，我假设它会在身体加载时运行，但这是在身体开始加载之前还是在完成加载之后？我会尝试他们两个。
好电话:)。这实际上是在页面和资产加载之后（例如，资产是图片的 src="..." 和 css 链接标签的 href）。
w3schools.com/jsref/event_onload.asp。但是jquery的onready可能是你最终想要的
让它与函数和 onload 一起工作。谢谢你。我赞成它，但需要更多的“声誉”才能显示出来！
没问题，总有一天会显示的?。无论如何，我得到了代表点。快乐编码！顺便看看丹尼尔的答案，因为加载一个全新的 CSS 文件似乎效率低下，而不是简单地改变类。

【解决方案2】：

为什么不使用类似的东西来分配类

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

在其他情况下删除它

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

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

【讨论】：

谢谢。我正在尝试在页面加载时更改类，但我不确定如何在页面加载时默认运行脚本，但在执行导航栏代码之后