Javascript 样式选择器，保持页面之间的样式

我正在设计一个网页，我做了一个样式选择器，但是当我访问我的网页的其他页面时，我选择的样式就消失了

我有这样的东西

函数设置样式表（url）{
var stylesheet=document.getElementById（“样式表”）；
stylesheet.setAttribute（'href'，url）；
}

html{
高度：1000px；
}
身体{
高度：1000px；
宽度：100%；
边际：0px；
字体系列：无衬线；
}
a:链接{
文字装饰：无；
颜色：白色；
}
a:参观了{
文字装饰：无；
颜色：白色；
}
a:悬停{
文字装饰：无；
颜色：白色；
}
a:主动的{
文字装饰：无；
颜色：白色；
}
#导航栏{
字体大小：粗体；
文本对齐：居中；
浮动：左；
背景色：#333333；
颜色：白色；
列表样式类型：无；
保证金：0；
填充：0；
宽度：100%；
}
.css_开关a{
浮动：对；
显示：块；
颜色：白色；
填充：14px 16px；
文字装饰：无；
游标：默认值；
}

内容文本

您可以在浏览器中设置cookie：

document.cookie = "theme=" + url + "; expires=" + 
                  new Date(Date.now()+365*24*60*60*1000).toUTCString();

然后每次加载页面时，获取主题：

var theme = ((document.cookie || "").match(/theme=(\w+)/) || ["","light"])[1];
document.getElementById("stylesheet").href = theme + ".css";

---

您需要将用户的选择存储在本地或服务器端。您可以在本地将信息存储在或cookie中。服务器端您可以将信息存储在数据库或会话变量中

最容易实现imo的是localStorage。修改

setStyleSheet

函数以存储用户的选择。然后添加一个onload事件，该事件将在页面加载后立即执行，从localStorage检索该选项，然后将样式表设置为所选url

//onload event to set the style 
window.addEventListener("load",function(){
   var templateUrl = localStorage.cssTemplate || "light.css";
   document.getElementById("stylesheet").setAttribute("href",templateUrl);
});

function setStyleSheet(url) {
    var stylesheet = document.getElementById("stylesheet");
    stylesheet.setAttribute('href', url);
    localStorage.cssTemplate = url;
}

您还可以使用类来操作整个模板，而不是使用文件。例如，有一个

body.light

和

body.dark

类。然后使用这些作为前缀添加规则

body.light div { background:white; }
body.light nav { background:#EFEFEF; }

body.dark div { background:black; }
body.dark nav { background:#1E1E1E; }

然后，不用设置文件url，只需更改body元素上的类即可

window.addEventListener("load",function(){
   var template = localStorage.cssTemplate || "light";
   document.body.className = template;
});

function setStyleSheet(template) {
    document.body.className = template;
    localStorage.cssTemplate = template;
}

---

是的，当您导航到其他页面时，html文档中的所有数据都将丢失。要保留它，您可以将最后选择的样式作为url中的参数传递，也可以将其保存在cookie中，如果您使用的是能够保留会话的服务器，甚至可以将其保存在http会话中。

为什么要创建新的样式表。为什么不给body一个类，比如.dark或.light，在CSS文件中，您可以通过引用body类作为父类来创建暗主题样式。例如.dark div{background color:black；}和.light div{background color:white；}。要更改样式，请使用JavaScript将body元素的类更改为.light或。dark@IPAddress因为你必须加载一个包含两个主题的样式表。随着主题的增加，加载时间会越来越短。如果有10秒或100秒不同的主题，它会变得非常慢。@4判断你的观点是否正确。但是，您的问题中只提到了黑暗或光明主题。感谢您的帮助，但我从未使用过Cookie，因此我不知道在哪里编写该代码。顶部代码位于

setStylesheet

方法中，底部代码位于

onload

块中。我已经编写了您需要的所有代码。感谢您的回复，我对第一个选项感兴趣，将selecte样式作为参数传递到URL中，我如何才能做到这一点？您的代码工作得非常完美！这就是我想要的，谢谢你的回复和帮助。昨天你的代码运行得很好，现在我在本地主机上更改了文件系统。如果我有一个目录树，比如：/root/index.html/root/style/main.css/root/style/light.css/root/style/dark.css/root/page1/index.html/root/page2/index.html，我必须更改代码吗？因为现在不行了。如果我在第1页，选择了样式2，我会转到第2页，我会取消默认样式，如果我回到第1页，我会选择样式2again@SergiFern这取决于你如何实现它。你能给出一个JSFIDLE或类似的例子来说明你是如何实现它的吗？但是您需要更改的只是部分：

| |“light.css”

，它只需要更改为默认css文件的路径。因为您使用的是文件的相对路径。主页上有

style/light.css

，其他页面上有

。/style/light.css

。当从主页保存并转到子页面时，它将尝试在类似

/testing/style/light.css的位置获取样式。要么使用绝对路径，要么在所有页面上使用以/开头的路径，即
/style/light.css
现在我做了一些更改，但它只起了一半作用，对不起，我的英语太差了。现在，如果我选择深色样式并切换页面，则所有页面都具有去深色样式，但似乎没有默认的浅色样式，因为在开始时，样式切换程序中没有绿色背景。我希望你能明白我在这里说的话：谢谢你的帮助！