Stil-Selektor, Stil zwischen den Seiten beibehalten

Question

Ich entwerfe eine Webseite, ich habe einen Stil-Selektor, aber wenn ich auf andere Seite meiner Webseite zugreife, verschwindet der von mir gewählte Stil.

Ich habe so etwas.

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>

Was ich will, zu tun ist, wenn Sie zu Stil namens „Dark“ geschaltet, wenn Standard ist „Light“, und Sie zu anderen .html wechseln, wird das neue .html hat den Stil „Dark“

Answer 1

Sie müssen die Auswahl des Benutzers entweder lokal oder serverseitig speichern. Vor Ort können Sie Informationen in localStorage oder Cookies speichern. Serverseitig können Sie die Informationen in einer Datenbank oder einer Sitzungsvariablen speichern.

Am einfachsten wäre die Implementierung von localStorage. Ändern Sie Ihre setStyleSheet Funktion, um die Wahl des Benutzers zu speichern. Fügen Sie dann ein Onload-Ereignis hinzu, das ausgeführt wird, sobald die Seite geladen wird, rufen Sie diese Auswahl von localStorage ab und legen Sie dann das Stylesheet auf die ausgewählte URL fest.

Sie könnten auch anstelle von Dateien eine Klasse verwenden, um die gesamte Vorlage zu manipulieren. Zum Beispiel haben eine body.light und body.dark Klassen. Dann Regeln hinzufügen, diejenigen mit als Präfixe

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

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

dann stattdessen eine Datei-URL zu setzen, einfach die Klasse auf dem Körperelement ändern

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

Sie ein Cookie im Browser einstellen könnten:

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

Und dann jedesmal, wenn eine Seite geladen wird, erhalten das Thema:

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

Answer 3

Ja, Sie alle Daten im HTML-Dokument verlieren, wenn Sie Navigiere zu einer anderen Seite. Um es beizubehalten, können Sie den zuletzt ausgewählten Stil als Parameter in der URL übergeben oder Sie können ihn in einem Cookie oder sogar in einer http-Sitzung speichern, wenn Sie einen Server verwenden, der Sitzungen aufrechterhalten kann.