jQuery CSS-Operation

Ein sehr wichtiger Teil von jQuery ist die Möglichkeit, den DOM zu manipulieren.

jQuery bietet effektive Methoden zur Manipulation des Stils der Elemente.

In diesem Kapitel werden wir erläutern, wie man CSS-Klassen im DOM hinzufügt oder entfernt.

jQuery CSS-Operationen

Mit jQuery können wir den Stil der Elemente leicht manipulieren.

Wir haben die folgenden jQuery-Methode für CSS-Operationen:

• addClass()

• removeClass()

• toggleClass()

• css()

Ich werde Ihnen zeigen, wie man jede dieser Methoden verwendet.

jQuery addClass() Methode

jQuery addClass()Die Methode fügt eine oder mehrere Klassennamen zu den ausgewählten Elementen hinzu.

Ein Beispiel zeigt, wie eine Klasse zu dem ersten <p>-Element hinzugefügt wird:

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

Einmal können mehrere Klassen (getrennt durch Leerzeichen) zu einem ausgewählten Element hinzugefügt werden, wie folgt:

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

jQuery removeClass() Methode

jQuery removeClass()Die Methode entfernt eine oder mehrere Klassennamen aus den ausgewählten Elementen.

Ein Beispiel zeigt, wie eine Klasse aus allen <p>-Elementen entfernt wird:

$("button").click(function(){
　　$("p").removeClass("highlight");
});

Einmal können Sie eine oder mehrere Klassen (getrennt durch Leerzeichen) aus einer ausgewählten Gruppe von Elementen entfernen, wie folgt:

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

Wenn der Klassename im Parameter nicht angegeben ist, werden alle Klassen entfernt:

$("button").click(function(){
　　$("p").removeClass();
});

jQuery toggleClass() Methode

jQuery toggleClass()Diese Methode wird im Hinzufügen/Wechselt zwischen dem Entfernen einer oder mehrerer Klassen von ausgewählten Elementen.

Der folgende Beispiel wechselt zwischen dem Hinzufügen und Entfernen des Klassennamens "anotherClass" für alle <p>-Elemente:

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

Diese Methode überprüft den angegebenen Klassennamen jedes Elements:

• Wenn die Klasse fehlt, wird diese hinzugefügt

• Wenn bereits eine Klasse gesetzt wurde, wird diese entfernt

jQuery css() Methode

jQuery css()Methode zum Erhalten oder Verstellen einer oder mehrerer Styl-attributwerte des ausgewählten Elements.

jQuery css()Methoden werden im nächsten Kapitel erläutert.

jQuery CSS Referenz

Für eine vollständige Referenz der CSS Methoden besuchen Sie bitte unserejQuery HTML / CSS Referenz.