Wechseln zwischen zwei Stylesheets

Dies ist eine alternative Lösung, die zu berücksichtigen ist, wenn Rorys Lösung aus irgendeinem Grund nicht angewendet werden kann. Es ist ideal, einfach eine body -Klasse umzuschalten und diese Klasse als Basisselektor zu verwenden - Ich habe diese Methode kürzlich für eine Anwendung angewendet, die zwischen einem dunklen und hellen Thema wechselt und dann in% co_de speichert %, so dass die Änderungen "erinnert" werden, zB:

Zusammenfassung

1. Die folgende Lösung speichert die relativen Dateipfade (typisch für Standard-Wordpress-Installationen) für Variablen (Sie haben möglicherweise nicht immer eindeutige Bezeichner ( localStorage attribute values) verfügbar und Core-Dateien bearbeiten, um eins einzuschließen, wird nicht als gute Praxis betrachtet (aus Gründen, die nicht berührt werden) hier) ist es besser, diese Dateipfade in Variablen zu speichern;)
2. Am id von .click() wird die Methode '#css_toggle' verwendet Schleife durch alle Instanzen von Stylesheets (von denen es am meisten geben würde wahrscheinlich ein paar sein), erlaubt es uns auch, den Umfang von neu zu definieren .each() , was sich als hilfreich erweisen wird, wenn man vorwärts geht;
3. Durch jede Iteration der Schleife ist der $(this) aktuell im Bereich hat sein Attribut link in einer Variablen gespeichert;
4. Der gespeicherte Wert dieses Attributs wird dann mit dem verglichen relative Dateipfade haben wir zuvor in
gespeichert
5. Wenn diese gespeicherten Werte gefunden werden, wird href Das Attribut des betreffenden Elements href wird entsprechend aktualisiert

Code-Snippet-Demonstration:

Eine bessere und zuverlässigere Lösung wäre es, ein einzelnes Stylesheet zu verwenden und das Styling zu ändern, indem Sie die Regeln von einer Klasse in body abhängig machen. Sie können dann diese Klasse bei Bedarf einfach umschalten, etwa so:

Sie können trennen mit jquery

Demo-Link

Es gibt das gewünschte einfache Beispiel:

HTML:

JS:

Sie können etwas wie folgt ausprobieren:

Anstelle von lang href verwenden Sie link[href*="style.css"] , um style.css

Und Sie könnten auch ID verwenden, anstatt nach Dateiname zu suchen.