jQuery - CSS-Klassen abrufen und festlegen
Mit jQuery ist es einfach, den Stil von Elementen zu manipulieren.
jQuery-Manipulation von CSS
jQuery hat mehrere Methoden zur CSS-Manipulation. Wir werden uns die folgenden Methoden ansehen:
addClass()- Fügt den ausgewählten Elementen eine oder mehrere Klassen hinzuremoveClass()- Entfernt eine oder mehrere Klassen von den ausgewählten ElemententoggleClass()- Wechselt zwischen dem Hinzufügen/Entfernen von Klassen von den ausgewählten Elementencss()- Setzt das Style-Attribut oder gibt es zurück
Beispiel-Stylesheet
Das folgende Stylesheet wird für alle Beispiele auf dieser Seite verwendet:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery addClass() Methode
Das folgende Beispiel zeigt, wie Klassenattribute zu verschiedenen Elementen hinzugefügt werden. Natürlich können Sie beim Hinzufügen von Klassen mehrere Elemente auswählen:
Beispiel
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
addClass()Sie können auch mehrere Klassen innerhalb der Methode angeben :
Beispiel
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() Methode
Das folgende Beispiel zeigt, wie Sie ein bestimmtes Klassenattribut aus verschiedenen Elementen entfernen:
Beispiel
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQuery toggleClass() Methode
Das folgende Beispiel zeigt, wie die jQuery- toggleClass()Methode verwendet wird. Diese Methode schaltet zwischen dem Hinzufügen/Entfernen von Klassen aus den ausgewählten Elementen um:
Beispiel
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css() Methode
Die jQuery- css()Methode wird im nächsten Kapitel erklärt.
jQuery-Übungen
jQuery-CSS-Referenz
Eine vollständige Übersicht aller jQuery-CSS-Methoden finden Sie in unserer jQuery HTML/CSS-Referenz .