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

时间:2016-06-04 16:15:01

标签: javascript html css html5 css3

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

我有类似的东西。



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;
&#13;
&#13;

我想要做的是,如果您切换到名为&#34; Dark&#34;的样式,当默认为&#34; Light&#34;时,您切换到其他.html,新的.html有风格&#34;黑暗&#34;

3 个答案:

答案 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.lightbody.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;
}

答案 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";