Metoda css
Metoda css umožňuje získávat
a měnit CSS styly elementu.
Je důležité si pamatovat, že budeme získávat 'vypočítané
hodnoty' vlastností (computed style
properties), které se mohou lišit od
zadaných v css stylech.
Syntaxe
Získat jednu vlastnost:
$(selektor).css(vlastnost);
Získat více vlastností, předávaný parametr - pole názvů vlastností:
$(selektor).css(['width', 'height', 'color']);
Změnit jednu vlastnost:
$(selektor).css(vlastnost, nová hodnota);
Změnit více vlastností, předáním je ve formě objektu,
obsahujícího páry 'klíč: hodnota'. Název vlastnosti
se uvádí ve formě CamelCase:
$(selektor).css({fontSize: '12px', color: 'red'});
Nebo, alternativní varianta:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Také můžeme aplikovat zadanou funkci na každý
element v sadě. Přitom první parametr funkce
obdrží číslo elementu v sadě, a druhým parametrem
- aktuální hodnotu zadané css vlastnosti
pro konkrétní element. Přitom this
uvnitř funkce bude ukazovat na aktuální element.
CSS vlastnost každého elementu se změní na tu,
kterou vrátí funkce konkrétně pro tento element:
$(selektor).css(název vlastnosti, function(číslo v sadě, aktuální hodnota css vlastnosti));
Příklad
Pojďme získat všechny elementy s třídou www
a změnit jejich barvu na červenou:
<p class="www">text</p>
$('.www').css('color', 'red');
Příklad
Pojďme získat všechny elementy s třídou www
a změnit jejich barvu na červenou, a velikost písma
- na 20px:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Nebo, alternativní varianta:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
