jQuery hakee ja asettaa CSS-luokat

jQuery:n avulla CSS-elementtejä voidaan käsitellä helposti.

jQuery CSS-toiminnot

jQuery:llä on useita CSS-toimintoja. Opimme seuraavat:

  • addClass() - Lisää yksi tai useita luokkia valituista elementeistä
  • removeClass() - Poista yksi tai useita luokkia valituista elementeistä
  • toggleClass() - Lisää tai poista luokka valituista elementeistä
  • css() - Aseta tai palauta tyyle ominaisuus

Esimerkki tyyletlus

Seuraava tyyletlus käytetään kaikissa tämän sivun esimerkeissä:

.tärkeä
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

jQuery addClass() -menetelmä

Seuraava esimerkki näyttää, miten lisätään luokka eri elementteihin. Totta kai voit valita useita elementtejä lisättäessä luokkaa:

Esimerkki

$("nappi").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("tärkeä");
});

Kokeile itse

Voit myös määritellä useita luokkia addClass() -menetelmässä:

Esimerkki

$("nappi").click(function(){
  $("#div1").addClass("tärkeä blue");
});

Kokeile itse

jQuery removeClass() -menetelmä

Seuraava esimerkki näyttää, miten poistetaan määritetty luokka eri elementeistä:

Esimerkki

$("nappi").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Kokeile itse

jQuery toggleClass() -menetelmä

Seuraava esimerkki näyttää, miten käytetään jQuery toggleClass() -menetelmää. Tämä menetelmä vaihtaa valittujen elementtien luokkien lisäämisen ja poistamisen välillä:

Esimerkki

$("nappi").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Kokeile itse

jQuery css() -menetelmä

Kuvailemme jQuery css() -menetelmää seuraavassa luvussa.

jQuery HTML ohjekirja

Jos haluat tietää jQuery CSS-metoden koko sisällön, vieraile jQuery CSS toiminnan ohjekirja