jQuery und CSS

Wir können auch direkt über jQuery auf die CSS-Eigenschaften zugreifen. Wollen wir beispielsweise alle Absätze in orange angezeigt bekommen, funktioniert das über .css.

Beispiel:

$(document).ready(function(){
    $('p').css('color', 'orange');
});

Allerdings muss man bei den CSS-Anweisungen aufpassen, die in CSS mit Bindestrich geschrieben werden. So z.B. background-color – in jQuery fliegt der Bindestrich raus und es erfolgt die Schreibweise in CamelCases, also in diesem Fall mit einem Großbuchstaben "backgroundColor"!

$('p').css('backgroundColor', 'orange');

Allerdings sollte man nicht CSS in jQuery einbauen, da die Pflege somit keinen Spaß mehr macht. Die richtige Vorgehensweise ist, dass man die Designanweisungen von CSS in der CSS-Datei hat. Hier würden wir z.B. eine Klasse erstellen mit .fehlerhinweise, die die Schrift rot anzeigt.

In der CSS-Datei:

.fehlerhinweise { color: red; }

Und über jQuery weist man nun die Klasse zu:

$('p').addClass('fehlerhinweise');

Unser Ergebnis nach dem Ausführen der jQuery-Anweisung:

<p class="fehlerhinweise">Zweiter Absatz</p>

Falls man eine Klasse wieder loswerden möchte, dann hilft .removeClass().

$('p').removeClass('fehlerhinweise');

Und das Ganze macht dann erst richtig Spaß, wenn man auf Besucheraktionen reagieren kann. Im nächsten Kapitel schauen wir uns an, wie man Mausklicks auswertet und darauf dann reagiert (z.B. mit CSS und z.B. Einblenden von Informationen).