Gibt es eine Möglichkeit, das Stylesheet einer Seite basierend auf dem Stylesheet einer anderen Seite zu ändern?

Question

Ich mache eine Webseite, die Tasten enthält, um das Thema von hell zu dunkel und zurück auf der Titelseite zu ändern. Wenn ich jedoch auf eine andere Seite klicke, möchte ich, dass das Thema bleibt.

Gibt es eine Möglichkeit, dass ich dem Browser mitteilen kann, die CSS-Datei dynamisch zu wählen, je nachdem, ob der Benutzer das helle oder dunkle Thema verwendet hat?

Denn hier Bezug ist, was ich auf der Titelseite haben:

Javascript:

function swapStyleSheet(sheet, text){ 
//variables to access elements in the DOM 
var styleSheet = document.getElementById('pagestyle'); 
var defaultText = document.getElementById('styleSwitchText'); 

styleSheet.setAttribute('href', sheet); //changes the stylesheet 
defaultText.style.display = "none"; //hides initial text 

//creates p element and appends text parameter to it 
var pElement = document.createElement('p'); 
var textnode = document.createTextNode(text); 
pElement.appendChild(textnode); 

var item = document.getElementById('swapStyleButtons'); 
//replaces the text node in the p each time button is clicked 
item.replaceChild(pElement, item.childNodes[0]); 
} 

html:

<div id="swapStyleButtons"> 
    <p id="styleSwitchText">Don't like the style? Try Night Mode!</p> 
    <button id='night' onclick='swapStyleSheet("dark.css", "Think Night Mode sucks? Switch back!")'>Night</button> 
    <button id='default' onclick='swapStyleSheet("recipes.css", "Liked it better before? Try Night Mode!")'>Default</button> 
</div> 

Das funktioniert perfekt auf der Titelseite. Ich könnte diesen Vorgang einfach für die anderen Seiten wiederholen, aber dann müsste der Benutzer den Knopf auf jeder Seite drücken, was natürlich ein bisschen nervig ist.

Kann 1 html Seite auf diese Weise mit einem anderen kommunizieren?

Answer 1

Mit HTML5 können Sie Daten mit HTML selbst speichern und brauchen keine andere Sprache. Hier

function setColorTheme(curColorTheme) 
{ 
    if(typeof(Storage) !== "undefined") { 
     localStorage.setItem("colorTheme", curColorTheme); 
    } else { 
     // Backup cookie Support 
    } 
} 

function getColorTheme() 
{ 
    if(typeof(Storage) !== "undefined") { 
     return localStorage.getItem("colorTheme"); 
    } else { 
     // Backup cookie Support 
    } 
} 

ist ein Tutorial:

http://www.w3schools.com/html/html5_webstorage.asp

Answer 2

innen buttons Ereignis klicken für die Wahl Sheet Schreib folgenden Code ausgewählt Sheet als lokalen Speicher zu setzen

localStorage.setItem("Selected_Style_sheet_name", "yourstylesheetname"); 

In Home-Set ausgewählt Thema

var btn1 = document.getelementbyid("btnTheme1"); 
    var btn2 = document.getelementbyid("btnTheme2"); 

    btn1.onclick =function(){ 
    localStorage.setItem("Selected_Style_sheet_name", "Theme1.css"); 

    } 
    btn2.onclick =function(){ 
    localStorage.setItem("Selected_Style_sheet_name", "Theme2.css"); 

    } 

Jetzt abgesehen von der Startseite folgendem Code auf jeder Seite hinzufügen, es

if(localStorage.getItem("Selected_Style_sheet_name") !== null){ 

    styleSheet.setAttribute('href', localStorage.getItem("Selected_Style_sheet")); 

}