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

Question

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

我有这样的东西。

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>

我想做的是，如果您切换到名为“Dark”的样式，默认为“Light”，然后切换到其他 .html，则新 .html 的样式为“Dark”

Answer 1

您需要将用户的选择存储在本地或服务器端。在本地，您可以将信息存储在 localStorage 中, 或 cookies 。服务器端，您可以将信息存储在数据库或 session 变量中。

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