文章/答案/技术大牛

发布

社区首页 >问答首页 >根据本地存储中的值更改类属性

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

Stack Overflow用户

提问于 2017-01-21 22:49:14

回答 2查看 948关注 0票数 0

我的头文件中有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>

以下body部分中的代码：

<nav class="navbar navbar-default navbar-fixed-top" id="navbarid">

如果localStorage是“暗”的，我想使用引导程序类" navbar - inverse“将导航栏更改为导航栏反转。

我只是不知道如何在页面加载上运行一些东西来检查本地存储(如head部分)和更改nav类(在body部分)。

如有任何指导，敬请惠顾。谢谢。

css

twitter-bootstrap

class

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-01-21 23:54:42

在解析页面的过程中，<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()" >
...

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

票数 1

Stack Overflow用户

发布于 2017-01-21 23:01:26

为什么不将class也指定为

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

在其他情况下将其删除

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41780716

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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