Mit jQuery, ist es einfach, die CSS-Elemente zu manipulieren.
-
jQuery Manipulieren von CSS
jQuery hat mehrere Methoden für die CSS-Manipulation. Wir werden bei der folgenden Methoden aus:
- addClass() - Fügt eine oder mehrere Klassen zu den ausgewählten Elementen
- removeClass() - Entfernt eine oder mehrere Klassen aus den ausgewählten Elementen
- toggleClass() - Schaltet zwischen dem Hinzufügen / Entfernen von Klassen aus den ausgewählten Elementen
- css() - Setzt oder gibt den Stil - Attribut
Beispiel Sheet
Das folgende Stylesheet wird für alle Beispiele auf dieser Seite verwendet werden:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}jQuery addClass() Methode
Das folgende Beispiel zeigt, wie Klassenattribute verschiedene Elemente hinzuzufügen. Natürlich können Sie mehrere Elemente auswählen, wenn Klassen und fügte hinzu:
Beispiel
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Versuch es selber " Sie können auch mehrere Klassen innerhalb des angeben addClass() Methode:
Beispiel
$("button").click(function(){
$("#div1").addClass("important blue");
});
Versuch es selber " jQuery removeClass() Methode
Das folgende Beispiel zeigt, wie eine bestimmte Klasse Attribut aus verschiedenen Elementen zu entfernen:
jQuery toggleClass() Methode
Das folgende Beispiel zeigt , wie die jQuery verwenden toggleClass() Methode. Diese Methode schaltet zwischen dem Hinzufügen / Klassen aus den ausgewählten Elemente zu entfernen:
jQuery css() Methode
Die jQuery css() Methode wird im nächsten Kapitel erläutert.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»
jQuery CSS Referenz
Eine vollständige Übersicht über alle Methoden jQuery CSS, gehen Sie bitte auf unsere jQuery HTML / CSS Referenz .