jQuery CSS-Klassen abrufen und setzen

Mit jQuery können CSS-Elemente leicht bearbeitet werden.

jQuery CSS-Operation

jQuery verfügt über mehrere Methoden zur CSS-Operation. Wir werden die folgenden lernen:

  • addClass() - Hinzufügen einer oder mehrerer Klassen zu ausgewählten Elementen
  • removeClass() - Entfernen einer oder mehrerer Klassen von ausgewählten Elementen
  • toggleClass() - Hinzufügen/Entfernen von Klassen für ausgewählte Elemente
  • css() - Einstellen oder Rückgabe von Stilattributen

Beispiel Stilübersicht

Die folgende Stilübersicht wird für alle Beispiele auf dieser Seite verwendet:

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

jQuery addClass() Methode

Der folgende Beispiel zeigt, wie man Klassen zu verschiedenen Elementen hinzufügen kann. Natürlich können Sie auch mehrere Elemente auswählen, um Klassen hinzuzufügen:

Beispiel

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Versuchen Sie es selbst

Sie können auch mehrere Klassen in der addClass() Methode angeben:

Beispiel

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Versuchen Sie es selbst

jQuery removeClass() Methode

Der folgende Beispiel zeigt, wie man eine bestimmte Klasse aus verschiedenen Elementen löschen kann:

Beispiel

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Versuchen Sie es selbst

jQuery toggleClass() Methode

Der folgende Beispiel zeigt, wie man die jQuery toggleClass() Methode verwendet. Diese Methode ändert die Klasse eines ausgewählten Elements hinzufügen/entfernen:

Beispiel

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Versuchen Sie es selbst

jQuery css() Methode

Wir werden im nächsten Kapitel die jQuery css() Methode erläutern.

jQuery HTML Referenzhandbuch

Für eine vollständige Liste der jQuery CSS Methoden besuchen Sie bitte unsere jQuery CSS Referenzhandbuch