2016-06-04 1 views
-1

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.Stil-Selektor, Stil zwischen den Seiten beibehalten

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“

+0

Warum ein neues Stylesheet erstellen. Warum geben Sie Körper nicht eine Klasse wie .dark oder .light und in der CSS-Datei können Sie den dunklen Thema-Stil erstellen, indem Sie auf die Körperklasse als Eltern verweisen. Zum Beispiel .dark div {background-color: black;} und .light div {background-color: white;}. Um den Stil zu ändern, verwenden Sie JavaScript, um die Klasse des body -Elements in .light oder .dark zu ändern. –

+0

@IPAddress Da müssen Sie dann ein Stylesheet laden, das beide Designs enthält. Die Ladezeit wird immer schlechter, je mehr Themen hinzugefügt werden. Es würde sehr langsam werden, wenn es 10 oder 100 verschiedene Themen gäbe. – 4castle

+0

@ 4castle Ihr Punkt ist gültig. Sie haben jedoch nur in Ihrer Frage ein dunkles oder helles Thema erwähnt. –

Antwort

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

Ihr Code funktioniert perfekt! Das war was ich will, thaks für deine Antwort und deine Hilfe. –

+0

Gestern hat dein Code funktioniert, jetzt habe ich das Dateisystem auf meinem localhost geändert. Wenn ich eine Verzeichnisstruktur habe wie: /root/index.html /root/style/main.css /root/style/light.css /root/style/dark.css /root/page1/index.html/root/page2 /index.html Ich muss deinen Code ändern?Weil jetzt nicht funktioniert. Wenn ich auf Seite1 bin und ich wähle den Stil2, gehe ich zu Seite2 und ich habe den Standard-Stil, wenn ich zurück zu Seite1 gehe, habe ich wieder Style2 –

+0

@ SergiFernàndez Es hängt davon ab, wie Sie es implementiert haben. Können Sie ein JSFiddle oder ähnliches geben, um zu zeigen, wie Sie es implementiert haben? Aber alles, was Sie ändern müssen, ist der Teil: '|| "light.css" 'muss nur in den Pfad der Standard-CSS-Datei geändert werden. –

0

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"; 
+0

Danke für Ihre Hilfe, aber ich habe nie Cookies verwendet, daher weiß ich nicht, wo ich diesen Code schreiben soll. –

+1

Der oberste Code wird in Ihrer 'setStylesheet'-Methode verwendet und der untere Code wird in einen' onload'-Block geschrieben. Ich habe bereits den ganzen Code geschrieben, den du brauchst. – 4castle

1

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.

+0

Danke für Ihre Antwort, ich bin an der Option firt interessiert, übergebe den ausgewählten Stil als Parameter in der URL, wie kann ich das tun? –

Verwandte Themen