jQuery: CSS Stylesheet Switcher

In diesem Tutorial möchte ich euch zeigen, wie man mit wenigen Zeilen Code, JavaScript und jQuery einen CSS Stylesheet Switcher auf einer Website implemetieren kann.

Im Beispiel haben wir drei verschiedene CSS Styles zur Auswahl, die der Nutzer mit einem Link einstellen kann.

Im Folgenden zeige ich euch den nötigen HTML und jQuery Code:

HTML: CSS Einbinden

Zunächst binden wir unser Standard-CSS ein, wie wir es von der Einbindung von CSS Stylesheets im Head unserer Seite gewohnt sind:

<link rel="stylesheet" href="style.css" type="text/css"> 

Dieses Stylesheet wird geladen, wenn der Nutzer zum ersten Mal unsere Seite besucht.

HTML: Links zu Stylesheets

Als nächstes brauchen wir die Links zu unseren Stylesheets. Wenn der Nutzer auf einen dieser Links klickt, wird der entsprechende Style geladen:

<a href="#" class="switchcss" rel="style.css">Normal</a>  
<a href="#" class="switchcss" rel="style1.css">Design 1</a>  
<a href="#" class="switchcss" rel="style2.css">Design 2</a>  

Die Links können wir überall auf unsere Seite packen, da wo wir sie benötigen.

Alle Links sind mit der Klasse "switchclass" gekennzeichnet. Dadurch können wir später die Links durch jQuery ansprechen. Insgesamt stellen wir 3 unterschiedliche Designs zur Verfügung, wofür wir natürlich auch 3 CSS-Dateien benötigen, die wir hier "style.css", "style1.css" und "style2.css" genannt haben. Der erste Link ("normal") soll später das Standarddesign ("style.css") wiederherstellen, die beiden anderen Links dienen dazu, dass der Nutzer "Design 1" (style1.css) und "Design 2" (style2.css) einstellen kann.

JavaScript: Unser jQuery Code

Zuletzt benötigen wir noch ein wenig jQuery, um unser Vorhaben umsetzen zu können:

$(document).ready(function() {  
   $("a.switchcss").click(function() {  
     $("link[rel=stylesheet]").attr('href' , $(this).attr('rel'));
     return false;  
   });  
});

Unser jQuery Code macht folgendes: Wir selektieren mit "a.switchcss" alle Links (a), denen die Klasse "switchcss" zugewiesen wurde. Das sind genau unsere 3 Links, die wir oben definiert haben.

Das OnClick-Event dieser Links ändern wir danach so: Klicken wir auf einen der Links, wird das Element "link[rel=stylesheet]" geändert. Das ist genau unsere Definition des Stylesheets vom Anfang aus dem Head. Und zwar wird das Attribut "href" (darin ist der Link zu der CSS-Datei angegeben) auf das Attribut "rel" des Links gesetzt. Und in dem "rel"-Attribut des Links haben wir oben unsere verschiedenen Stylesheets angegeben.

Damit ist unser CSS Styleswitcher mit jQuery fertig! Klicken wir auf einen der Links, wird das entsprechende Stylesheet geladen. Natürlich lassen sich die Namen, Links und die Anzahl der Stylesheets beliebig nach diesem Prinzip ändern und anpassen.