Methode css
De methode css maakt het mogelijk om
CSS-stijlen van een element op te vragen
en te wijzigen.
Het is belangrijk te onthouden dat we 'berekende
waarden' van eigenschappen (computed style
properties) zullen krijgen, die kunnen verschillen van
de waarden die in de CSS-stijlen zijn opgegeven.
Syntaxis
Eén eigenschap opvragen:
$(selector).css(eigenschap);
Meerdere eigenschappen opvragen, de doorgegeven parameter is een array met eigenschapsnamen:
$(selector).css(['width', 'height', 'color']);
Eén eigenschap wijzigen:
$(selector).css(eigenschap, nieuwe waarde);
Laten we meerdere eigenschappen wijzigen door ze door te geven als een object
dat sleutel-waardeparen bevat. De naam van de eigenschap
wordt opgegeven in CamelCase:
$(selector).css({fontSize: '12px', color: 'red'});
Of, een alternatieve optie:
<p class="www">tekst</p>
$('.www').css({'font-size':'12px', 'color':'red'});
We kunnen ook een opgegeven functie toepassen op elk
element in de set. Hierbij ontvangt de functie als eerste parameter het indexnummer van het element in de set, en als tweede parameter
- de huidige waarde van de opgegeven CSS-eigenschap
voor dat specifieke element. Hierbij zal this
in de functie verwijzen naar het huidige element.
De CSS-eigenschap van elk element verandert in de waarde
die de functie voor dat specifieke element teruggeeft:
$(selector).css(eigenschapnaam, function(indexnummer in set, huidige waarde css-eigenschap));
Voorbeeld
Laten we alle elementen met de klasse www opvragen
en hun kleur veranderen in rood:
<p class="www">tekst</p>
$('.www').css('color', 'red');
Voorbeeld
Laten we alle elementen met de klasse www opvragen
en hun kleur veranderen in rood, en de lettergrootte
- in 20px:
<p class="www">tekst</p>
$('.www').css({color:'red', fontSize:'20px'});
Of, een alternatieve optie:
<p class="www">tekst</p>
$('.www').css({'color':'red', 'font-size':'20px'});
