Metóda css
Metóda css umožňuje získavať
a meniť CSS štýly elementu.
Je dôležité pamätať, že budeme dostávať 'vypočítané
hodnoty' vlastností (computed style
properties), ktoré sa môžu líšiť od
zadaných v css štýloch.
Syntax
Získať jednu vlastnosť:
$(selektor).css(vlastnosť);
Získať viacero vlastností, odovzdávaný parameter - pole názvov vlastností:
$(selektor).css(['width', 'height', 'color']);
Zmeniť jednu vlastnosť:
$(selektor).css(vlastnosť, nová hodnota);
Zmeňme viacero vlastností, odovzdaním ich vo forme objektu,
obsahujúceho páry 'kľúč: hodnota'. Názov vlastnosti
sa uvádza vo forme CamelCase:
$(selektor).css({fontSize: '12px', color: 'red'});
Alebo, alternatívna možnosť:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Tiež môžeme aplikovať zadanú funkciu na každý
element v súbore. Pričom prvým parametrom funkcia
dostane číslo elementu v súbore, a druhým parametrom
- aktuálnu hodnotu zadanej css vlastnosti
pre konkrétny element. Pri tom this
vo vnútri funkcie bude ukazovať na aktuálny element.
CSS vlastnosť každého elementu sa zmení na tú,
ktorú vráti funkcia konkrétne pre tento element:
$(selektor).css(názov vlastnosti, function(číslo v súbore, aktuálna hodnota css vlastnosti));
Príklad
Poďme získať všetky elementy s triedou www
a zmeňme ich farbu na červenú:
<p class="www">text</p>
$('.www').css('color', 'red');
Príklad
Poďme získať všetky elementy s triedou www
a zmeňme ich farbu na červenú, a veľkosť písma
- na 20px:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Alebo, alternatívna možnosť:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
