Metoden css
Metoden css låter dig hämta
och ändra CSS-stilar för ett element.
Det är viktigt att komma ihåg att vi kommer att få 'beräknade
värden' för egenskaperna (computed style
properties), som kan skilja sig från
de som anges i CSS-stilarna.
Syntax
Hämta en egenskap:
$(selector).css(egenskap);
Hämta flera egenskaper, parametern som skickas är en array med egenskapsnamn:
$(selector).css(['width', 'height', 'color']);
Ändra en egenskap:
$(selector).css(egenskap, nytt värde);
Låt oss ändra flera egenskaper genom att skicka dem som ett objekt
innehållande par med 'nyckel: värde'. Egenskapsnamnet
anges i CamelCase:
$(selector).css({fontSize: '12px', color: 'red'});
Eller, ett alternativt sätt:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Vi kan också applicera en given funktion på varje
element i uppsättningen. Funktionen kommer då att få elementets index som första parameter, och som andra parameter
- det aktuella värdet för den angivna css-egenskapen
för det specifika elementet. Inuti funktionen kommer this
att peka på det aktuella elementet.
CSS-egenskapen för varje element kommer att ändras till det värde
som funktionen returnerar för just det elementet:
$(selector).css(egenskapsnamn, function(index i uppsättningen, aktuellt värde för css-egenskapen));
Exempel
Låt oss hämta alla element med klassen www
och ändra deras färg till röd:
<p class="www">text</p>
$('.www').css('color', 'red');
Exempel
Låt oss hämta alla element med klassen www
och ändra deras färg till röd, och teckenstorleken
till 20px:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Eller, ett alternativt sätt:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
