Metoden css
Metoden css giver mulighed for at hente
og ændre CSS-stilarter på et element.
Det er vigtigt at huske, at vi vil få de 'beregnede
værdier' af egenskaberne (computed style
properties), som kan afvige fra
de angivne i CSS-stilarter.
Syntaks
Hent en enkelt egenskab:
$(selector).css(egenskab);
Hent flere egenskaber, den sendte parameter er en array af egenskabsnavne:
$(selector).css(['width', 'height', 'color']);
Ændr en enkelt egenskab:
$(selector).css(egenskab, ny værdi);
Ændr flere egenskaber ved at sende dem som et objekt,
der indeholder par af 'nøgle: værdi'. Egenskabens navn
angives i form af CamelCase:
$(selector).css({fontSize: '12px', color: 'red'});
Eller, en alternativ mulighed:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Vi kan også anvende en given funktion på hvert
element i sættet. Her vil funktionen som første parameter modtage
elementets nummer i sættet, og som anden parameter
- den aktuelle værdi af den angivne css-egenskab
for det konkrete element. Her vil this
inde i funktionen pege på det aktuelle element.
CSS-egenskaben for hvert element ændres til det,
som funktionen returnerer for netop dette element:
$(selector).css(egenskabsnavn, function(nummer i sættet, aktuel værdi af css-egenskab));
Eksempel
Lad os hente alle elementer med klassen www
og ændre deres farve til rød:
<p class="www">text</p>
$('.www').css('color', 'red');
Eksempel
Lad os hente alle elementer med klassen www
og ændre deres farve til rød, og skriftstørrelsen
- til 20px:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Eller, en alternativ mulighed:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
