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

jQuery: CSS-ID manipulieren

CSS-IDs mit jQuery manipulieren

Ein Weg, um CSS und jQuery zusammenzubringen, besteht darin, dass man Bereiche der Webseite mittels ID definiert und dann in jQuery anspricht. Dabei wird die Funktion .css in jQuery genützt, um ein verändertes Layout möglich zu machen.

ergibt:

Im Beispiel haben wir nun eine Ebene (Div) gesetzt und mit der ID "test-id" versehen. Innerhalb der Ebene gibt es dann einen Link, dem wir eine Klasse zugeordnet haben, doch damit wollen wir uns im nächsten Beispiel auseinandersetzen.

Was wir hier thematisieren, ist die Verbindung von CSS und jQuery. Natürlich ist das Beispiel ziemlicher Nonsens, denn wenn ich einen roten Rahmen haben möchte, kann ich das mit CSS auch realisieren. Doch was, wenn ich an einer bestimmten Stelle aufgrund einer bestimmten Aktion einen Rahmen sehen möchte? Das gibt es im Internet schon öfter, dass man ein Suchergebnis hat und wenn man mit der Maus über ein Ergebnis fährt, verändert sich der Hintergrund. Mit jQuery ist so etwas möglich.

Im aktuellen Fall ist die Zuweisung durch

$("#test-id") erfolgt, das heißt, jQuery erhält durch das "#" die Information, dass es sich um eine CSS-ID handelt und spricht diese an. Damit die CSS-Formatierung manipuliert werden kann, braucht es den Zusatz .css.

Aktuell also

.css("border", "2px solid #ff0000");

Das bedeutet, dass die Formatierung um einen roten Rahmen mit 2 Pixel Stärke ergänzt werden soll. Gibt es noch andere CSS-Formatierungen, so bleiben diese unberührt - nur der Rahmen wird verändert. Das Ganze könnte man jetzt dynamisch ändern, zum Beispiel durch einen Mouseover-Effekt. Letztlich geht es hier aber nur darum zu verstehen, wie einfach man jQuery mit CSS als Team auftreten lassen kann.

Und dennoch: auch wenn das möglich ist, sollte man sich bewusst sein, dass nicht alles, was möglich ist, Sinn macht. Den roten Rahmen hätte ich normalerweise nicht mit jQuery eingebaut, sondern mit reinem CSS. jQuery macht dort Sinn, wo die Aktion eines Benutzers eine Reaktion beim Layout hervorrufen soll, denn das ist nur bedingt mit CSS möglich - möglich ist es auch, aber nicht immer.

Ebenfalls interessant:

[aktuelle Seite]

CSS-ID

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

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