Question

我设计了一个网页，我制作了一个样式选择器，但当我访问我网页的其他页面时，我选择的样式就消失了。

我有类似的东西。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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元素上的类

，而不是设置文件url

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

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

Answer 2

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

Answer 3

您可以在浏览器中设置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";

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

3 个答案: