Metoda css
Metoda css pozwala pobierać
i zmieniać style CSS elementu.
Ważne jest, aby pamiętać, że będziemy pobierać 'obliczone
wartości' właściwości (computed style
properties), które mogą różnić się od
określonych w stylach CSS.
Składnia
Pobierz jedną właściwość:
$(selektor).css(właściwość);
Pobierz kilka właściwości, przekazywany parametr - tablica nazw właściwości:
$(selektor).css(['width', 'height', 'color']);
Zmień jedną właściwość:
$(selektor).css(właściwość, nowa wartość);
Zmieńmy kilka właściwości, przekazując je w postaci obiektu,
zawierającego pary 'klucz: wartość'. Nazwa właściwości
jest podana w postaci CamelCase:
$(selektor).css({fontSize: '12px', color: 'red'});
Lub, alternatywny wariant:
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Możemy również zastosować daną funkcję do każdego
elementu w zestawie. Przy tym pierwszym parametrem funkcja
otrzyma numer elementu w zestawie, a drugim parametrem
- bieżącą wartość zadanej właściwości CSS
dla konkretnego elementu. Przy tym this
wewnątrz funkcji będzie wskazywać na bieżący element.
Właściwość CSS każdego elementu zmieni się na tę,
którą zwróci funkcja konkretnie dla tego elementu:
$(selektor).css(nazwa właściwości, function(numer w zestawie, bieżąca wartość właściwości CSS));
Przykład
Pobierzmy wszystkie elementy z klasą www
i zmieńmy ich kolor na czerwony:
<p class="www">text</p>
$('.www').css('color', 'red');
Przykład
Pobierzmy wszystkie elementy z klasą www
i zmieńmy ich kolor na czerwony, a rozmiar czcionki
- na 20px:
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Lub, alternatywny wariant:
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
