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

我的头中有js，它检查本地存储并相应地设置样式表。我正在使用引导导航栏，我希望导航栏也根据本地存储更改为反向颜色，但我无法让它工作。我想这是因为导航条形码在身体里

以下标题部分中的代码：

<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">

if（localStorage.getItem（“theme”）=“light”）{
document.getElementById（“maincss”）.href=“./css/main.css”；
}else if（localStorage.getItem（“主题”）=“暗”）{
document.getElementById（“maincss”）.href=“./css/dark.css”；
}否则{
document.getElementById（“maincss”）.href=“./css/main.css”；
};

以下正文部分中的代码：

<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为“暗”，我想使用引导类“navbar inverse”将navbar更改为navbar inverse

我就是不知道如何在页面加载上运行一些检查本地存储（如head部分）和更改nav类（如body部分）的东西

---

感谢您的指导。谢谢。

为什么不给班级分配类似的内容

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

并在其他情况下将其移除

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

检查链接以了解其他类代码示例：

---

为什么不给类分配类似的内容

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

并在其他情况下将其移除

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

检查链接以了解其他类代码示例： 在解析页面时，

标记中的代码有效地在适当的位置运行，因此由于它位于页眉部分，您的导航栏还没有被解析

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

<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>

及


...

你能预测这两个标签都会发生什么吗？
标签中的代码在解析页面时有效地运行到位，因此由于它位于页眉部分，因此导航栏还没有被解析

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

<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>

及


...

你能预测这两种情况吗？
谢谢。我正在尝试更改页面加载时的类，我不确定默认情况下如何在页面加载时运行脚本，但在执行导航条形码之后。我正在尝试更改页面加载时的类，我不确定默认情况下如何在页面加载时运行脚本，但在执行导航条形码之后，谢谢。我得到了checkStorage（）函数部分。在我尝试实现它之前，为了回答您的问题，我认为脚本将在第一个navbar加载后检查本地存储。因此，我可以添加代码来更改函数中的类。在第二个例子中，我假设它将在主体加载时运行，但这是在主体开始加载之前还是在它完成加载之后？我两个都试试。好主意：）。这实际上是在页面和资产加载之后（例如，资产是图像的
src=“…”
和css链接标记的
href
）。。但是jquery的onready可能是您最终想要的，让它使用函数和onload。非常感谢。我投了更高的票，但需要更多的“声誉”才能让它表现出来！没问题，总有一天会显示出来的。谢谢。我得到了checkStorage（）函数部分。在我尝试实现它之前，为了回答您的问题，我认为脚本将在第一个navbar加载后检查本地存储。因此，我可以添加代码来更改函数中的类。在第二个例子中，我假设它将在主体加载时运行，但这是在主体开始加载之前还是在它完成加载之后？我两个都试试。好主意：）。这实际上是在页面和资产加载之后（例如，资产是图像的
src=“…”
和css链接标记的
href
）。。但是jquery的onready可能是您最终想要的，让它使用函数和onload。非常感谢。我投了更高的票，但需要更多的“声誉”才能让它表现出来！没问题，总有一天会出现的