jQuery CSS-toiminnot - css()-metodi

jQuery CSS ohjeistus

Esimerkki

Aseta <p>-elementin väri:

$(".btn1").click(function(){
  $("p").css("color","red");
});

Kokeile itse

Määritelmä ja käyttö

css()-metodi palauttaa tai asettaa sopivien elementtien yhden tai useamman tyyliominaisuuden.

Palauttaa CSS-ominaisuuden arvon

Palauttaa ensimmäisen sopivan elementin CSS-ominaisuuden arvon.

Huomautus:Kun käytetään arvon palauttamiseen, lyhennettyjä CSS-ominaisuuksia (kuten "background" ja "border") ei tuettu.

$(selector).css(name)
Parametrit Kuvaus
name Välttämätön. Määritä CSS-ominaisuuden nimi. Tämä parametri voi sisältää minkä tahansa CSS-ominaisuuden. Esimerkiksi "color".

Esimerkki

Hanki ensimmäisen kappaleen color-tyyliominaisuuden arvo:

$("p").css("color");

Kokeile itse

Aseta CSS-ominaisuus

Aseta kaikki vastaavien elementtien määritetyn CSS-ominaisuuden arvo.

$(selector).css(name,value)
Parametrit Kuvaus
name Välttämätön. Määrittää CSS-ominaisuuden nimen. Tämä parametri voi sisältää minkä tahansa CSS-ominaisuuden, kuten "color".
value

Valinnainen. Määrittää CSS-ominaisuuden arvon. Tämä parametri voi sisältää minkä tahansa CSS-ominaisuuden arvon, kuten "red".

Jos asetetaan tyhjä merkkijono arvo, poistetaan määritetty ominaisuus elementistä.

Esimerkki

Aseta kaikkien kappaleiden väri punaiseksi:

$("p").css("color","red");

Kokeile itse

Aseta CSS-ominaisuus funktion avulla

Aseta kaikkien vastaavien elementtien tyyliominaisuuksien arvo.

Tämä funktio palauttaa asetettavan ominaisuuden arvon. Hyväksyy kaksi parametria, index on elementin indeksi objektikokoelmassa ja value on alkuperäinen ominaisuuden arvo.

$(selector).css(name,function(index,value))
Parametrit Kuvaus
name Välttämätön. Määrittää CSS-ominaisuuden nimen. Tämä parametri voi sisältää minkä tahansa CSS-ominaisuuden, kuten "color".
function(index,value)

Määrittää palauttavan CSS-ominaisuuden uuden arvon funktion.

  • index - valinnainen. Hyväksyy valitsimen indeksin sijainnin
  • oldvalue - valinnainen. Hyväksyy CSS-ominaisuuden nykyisen arvon.

Esimerkki 1

Aseta kaikkien kappaleiden väri punaiseksi:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

Kokeile itse

Esimerkki 2

Vähitellen lisää div:n leveyttä:

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

Kokeile itse

Aseta useita CSS ominaisuus/arvo -parit

$(selector).css({property:value, property:value, ...})

Aseta "nimi/arvo"-objekti kaikkiin vastaaviin elementteihin tyyliominaisuuksiksi.

Tämä on paras tapa asettaa suuri määrä tyylejä kaikkiin vastaaviin elementteihin.

Parametrit Kuvaus
{property:value}

Välttämätön. Määrittää tyylin ominaisuuden "nimi/arvo"-objekti.

Tämä parametri voi sisältää useita CSS-ominaisuuden nimi/arvo -parit. Esimerkiksi {"color":"red","font-weight":"bold"}

Esimerkki

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

Kokeile itse

jQuery CSS ohjeistus