Methode css
Die Methode css ermöglicht das Abrufen
und Ändern von CSS-Stilen eines Elements.
Es ist wichtig zu beachten, dass wir 'berechnete
Werte' der Eigenschaften (computed style
properties) erhalten, die sich von denen
in den CSS-Stilen angegebenen unterscheiden können.
Syntax
Eine Eigenschaft abrufen:
$(Selektor).css(Eigenschaft);
Mehrere Eigenschaften abrufen, übergebener Parameter - ein Array von Eigenschaftsnamen:
$(Selektor).css(['width', 'height', 'color']);
Eine Eigenschaft ändern:
$(Selektor).css(Eigenschaft, neuer Wert);
Mehrere Eigenschaften ändern, indem sie als Objekt übergeben werden,
das Schlüssel-Wert-Paare enthält. Der Name der Eigenschaft
wird in CamelCase angegeben:
$(Selektor).css({fontSize: '12px', color: 'red'});
Oder, alternative Variante:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Wir können auch eine bestimmte Funktion auf jedes
Element im Set anwenden. Dabei erhält die Funktion
als ersten Parameter die Nummer des Elements im Set und als zweiten Parameter
- den aktuellen Wert der angegebenen CSS-Eigenschaft
für das konkrete Element. Dabei wird this
in der Funktion auf das aktuelle Element zeigen.
Die CSS-Eigenschaft jedes Elements ändert sich auf den Wert,
den die Funktion konkret für dieses Element zurückgibt:
$(Selektor).css(Eigenschaftsname, function(Nummer im Set, aktueller Wert der CSS-Eigenschaft));
Beispiel
Lassen Sie uns alle Elemente mit der Klasse www abrufen
und ihre Farbe auf rot ändern:
<p class="www">text</p>
$('.www').css('color', 'red');
Beispiel
Lassen Sie uns alle Elemente mit der Klasse www abrufen
und ihre Farbe auf rot ändern, und die Schriftgröße
- auf 20px:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Oder, alternative Variante:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
