Sie sind hier: Startseite -> Javascript-Grundlagen -> jQuery -> Elemente selektieren -> CSS-Klassen

jQuery: CSS-Klassen manipulieren

CSS-Klassen mit jQuery ansprechen

Neben der Manipulation von CSS-IDs durch jQuery kann man auch die individuellen Klassen ansprechen, die man via HTML und CSS aufgebaut hat. So wird es möglich, einen bestimmten Link anzusprechen, der einer bestimmten Klasse zugeordnet wurde.

ergibt:

Wir haben das gleiche Beispiel vorrätig wie bei den CSS-IDs und nützen nun die Klasse "testlink", mit der wir den Link ausgestattet haben, um ein jQuery-Spielchen auszuprobieren. Diesmal wollen wir nicht, dass die ID verändert wird und der rote Rahmen ist auch kein Thema mehr, sondern wir wollen die Schrift des Links vergrößeren.

Angesprochen kann von jQuery nicht nur eine ID werden, wie dies im vorherigen Artikel gezeigt wurde, sondern auch eine Klasse. Im aktuellen Fall also

$(".testlink")

als Aufruf der CSS-Klasse und

.css("font-size", "18px");

als CSS-Befehl. Wieder gilt, dass der erste Wert der CSS-Befehl ist und der zweite der oder die Parameter. Und neuerlich gilt, dass dieses Beispiel eigentlich Unfug ist, weil man hätte die CSS-Einstellung mit CSS realisieren sollen.

Aber, wie sich später zeigt, kann man durch Kombination von Userverhalten und Layout mit jQuery sehr schöne Lösungen erarbeiten. Das aktuelle Beispiel könnte man nützen, um beim Mouseover-Effekt die Schrift zu vergrößern und weitere Formatierungen einzufügen. Wann CSS alleine reicht und wann man mit jQuery nachhilft, muss jeder Programmierer für sich selbst entscheiden - wichtig ist das Grundverständnis, dass es mit jQuery auch möglich ist und manchmal von Kunden auch gewünscht.

Ebenfalls interessant:

CSS-ID

Informationen über die Möglichkeit, mit jQuery CSS-IDs anzusprechen und zu verändern, beispielsweise durch geändertes Layout.

[aktuelle Seite]

CSS-Klassen

Informationen über die Möglichkeit, mit jQuery CSS-Klassen anzusprechen und zu verändern, beispielsweise durch geändertes Layout.

Zurück zum Hauptthema

Übersicht Elemente selektieren

Startseite Javascript-Grundlagen