Elegante Möglichkeit, Thema Stylesheets ohne Neuladen Seite Seite

Question

Ich bin auf der Suche nach einer Möglichkeit zum Hot-Swap-Stylesheets, während die Seite geladen wird. Hier ist meine aktuelle Lösung, es funktioniert, aber es hat einige Einschränkungen/Probleme.

html Kopf:

<link id="theme" href="themes/theme1.css" rel="stylesheet" type="text/css"> 

js:

themes = [ 
    "themes/theme1.css", 
    "themes/theme2.css" 
]; 

function themeSwitch() { 
    var currentTheme = $("#theme").attr('href'); 
    var themeID = themes.indexOf(currentTheme); 
    themeID = (themeID + 1) % themes.length; 
    $("#theme").attr('href', themes[themeID]); 
} 

Mein Problem mit diesem Ansatz ist, wenn die Funktion der Änderung genannt wird, ist nicht sofort als der Browser eine zusätzliche GET-Anforderung machen muss für die CSS-Datei. Ein weiteres Problem besteht darin, dass der Benutzer die Verbindung vorübergehend trennt, während er die Seite ohne Thema verwendet.

Answer 1

Verwendung alternative Sheet es einfach macht (zB für zwei Themen ist trivial)

<link id="theme" href="themes/theme1.css" rel="stylesheet" type="text/css"> 
<link id="alttheme" href="themes/theme2.css" rel="alternate stylesheet" type="text/css"> 

function themeSwitch() { 
    var t1 = document.getElementById('theme'); 
    var t2 = document.getElementById('alttheme'); 
    t1.disabled = !t1.disabled; 
    t2.disabled = !t1.disabled; 
} 

Eine generische Art und Weise, die eine beliebige Anzahl von Themen

<link class="theme" href="themes/theme1.css" rel="stylesheet" type="text/css"> 
<link class="theme" href="themes/theme2.css" rel="alternate stylesheet" type="text/css"> 
<link class="theme" href="themes/theme3.css" rel="alternate stylesheet" type="text/css"> 

var currentTheme = 0; 
var themes = [].slice.call(document.querySelectorAll('link.theme')); 

function themeSwitch() { 
    currentTheme = (currentTheme + 1) % themes.length; 
    themes.forEach(function(theme, index) { 
     theme.disabled = (index !== currentTheme); 
    }); 
} 

Und als letztes von allen erlaubt , obwohl Sie jQuery nicht markiert haben, verwenden Sie jQuery in Ihrem Code, um der jQuery-Menge zu entsprechen:

<link class="theme" href="themes/theme1.css" rel="stylesheet" type="text/css"> 
<link class="theme" href="themes/theme2.css" rel="alternate stylesheet" type="text/css"> 
<link class="theme" href="themes/theme3.css" rel="alternate stylesheet" type="text/css"> 

var currentTheme = 0; 
var themes = $('link.theme'); 

function themeSwitch() { 
    currentTheme = (currentTheme + 1) % themes.length; 
    themes.each(function(index, theme) { 
     theme.disabled = (index !== currentTheme); 
    }); 
}