我设计了一个网页,我制作了一个样式选择器,但当我访问我网页的其他页面时,我选择的样式就消失了。
我有类似的东西。
function setStyleSheet(url) {
var stylesheet = document.getElementById("stylesheet");
stylesheet.setAttribute('href', url);
}

html {
height: 1000px;
}
body {
height: 1000px;
width: 100%;
margin: 0px;
font-family: sans-serif;
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: white;
}
#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333333;
color: white;
list-style-type: none;
margin: 0;
padding: 0;
width:100%;
}
.css_switch a {
float: right;
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<ul id="navbar">
<li class="css_switch"><a class="dark" onclick="setStyleSheet('dark.css')" href="#">Dark</a></li>
<li class="css_switch"><a class="light" onclick="setStyleSheet('light.css')" href="#">Light</a></li>
</ul>
<div>
CONTENT TEXT
</div>
</div>
&#13;
我想要做的是,如果您切换到名为&#34; Dark&#34;的样式,当默认为&#34; Light&#34;时,您切换到其他.html,新的.html有风格&#34;黑暗&#34;
答案 0 :(得分:1)
您需要在本地或服务器端存储用户的选择。在本地,您可以将信息存储在localStorage或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; }
然后,只需更改body元素上的类
,而不是设置文件urlwindow.addEventListener("load",function(){
var template = localStorage.cssTemplate || "light";
document.body.className = template;
});
function setStyleSheet(template) {
document.body.className = template;
localStorage.cssTemplate = template;
}
答案 1 :(得分:1)
是的,当您导航到其他页面时,您将丢失html文档中的所有数据。为了保留它,你可以将最后选择的样式作为参数传递给url,或者你可以将它保存在cookie中,如果你使用能够保持会话的服务器,甚至可以保存在http会话中。
答案 2 :(得分:0)
您可以在浏览器中设置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";