css-metodi
Metodi css mahdollistaa
CSS-tyylien hakemisen ja muuttamisen elementeissä.
On tärkeää muistaa, että saamme 'lasketut
arvot' ominaisuuksille (computed style
properties), jotka voivat poiketa
CSS-tyyleissä määritellyistä.
Syntaksi
Hae yksi ominaisuus:
$(valitsin).css(ominaisuus);
Hae useita ominaisuuksia, välitetty parametri - taulukko ominaisuuksien nimistä:
$(valitsin).css(['width', 'height', 'color']);
Muuta yksi ominaisuus:
$(valitsin).css(ominaisuus, uusi arvo);
Muutetaan useita ominaisuuksia välittämällä ne objektina,
jossa on 'avain: arvo' -pareja. Ominaisuuden nimi
ilmoitetaan CamelCase -muodossa:
$(valitsin).css({fontSize: '12px', color: 'red'});
Tai vaihtoehtoinen tapa:
<p class="www">teksti</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Voimme myös soveltaa annettua funktiota jokaiseen
elementtiin valinnassa. Tässä tapauksessa funktio
sa ensimmäisenä parametrina elementin numeron valinnassa, ja toisena parametrina
- kyseisen elementin nykyisen CSS-ominaisuuden arvon.
Tässä this
funktion sisällä viittaa nykyiseen elementtiin.
Jokaisen elementin CSS-ominaisuus muuttuu arvoksi,
jonka funktio palauttaa kyseiselle elementille:
$(valitsin).css(ominaisuuden nimi, function(numero valinnassa, nykyinen CSS-ominaisuuden arvo));
Esimerkki
Haetaan kaikki elementit, joilla on luokka www
ja muutetaan niiden väri punaiseksi:
<p class="www">teksti</p>
$('.www').css('color', 'red');
Esimerkki
Haetaan kaikki elementit, joilla on luokka www
ja muutetaan niiden väri punaiseksi ja fontin koko
- 20px:ksi:
<p class="www">teksti</p>
$('.www').css({color:'red', fontSize:'20px'});
Tai vaihtoehtoinen tapa:
<p class="www">teksti</p>
$('.www').css({'color':'red', 'font-size':'20px'});
