33 Stimmen

jQuery: CSS Stylesheet Switcher

Tutorial von Computer Experte | 05.07.2012 um 15:33

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.

AntwortenPositivNegativ
Avatar
00 Stimmen

Gutes Tutorial und alles gut erklärt. Gefällt mir. Einziges Problem, das ich sehe: Das ausgewählte Stylesheet wird sich nicht gemerkt. Dadurch ist die Auswahl verloren gegangen sobald ein Nutzer eine neue Seite aufruft. Auf dieser müsste er dann das Stylesheet wieder neu auswählen.

Interessant wäre es hier, das aktuell gewählte Stylesheet in einem Cookie festzuhalten und dann immer wieder neu zu laden. Auf dieser Seite gibt es dazu eine kleine Lösung.

Ansonsten ist das Tutorial super und sollte auch für Nutzer verständlich sein, die noch Anfänger in Sachen jQuery sind.
06.07.2012 um 08:31

AntwortenPositiv Negativ
Antworten

Über den Autor

AvatarDer Autor hat keine Kurzbeschreibung seines Profils angegeben.
Profil anzeigen

 

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.