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).

Bitte unterstützen Sie dieses Projekt

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bestellen Sie über folgenden Link bei Amazon:
Bücher über JavaScript

Sie können uns auch eine Spende über PayPal zukommen lassen.

Vielen Dank für Ihre Unterstützung

weitere eigene Projekte: