Pomoću jQueryja lako je manipulirati stilom elemenata.

 

Manipuliranje CSS-om

 

jQuery ima nekoliko metoda za CSS manipulaciju.

 

Pogledat ćemo sljedeće metode:

 

•     addClass () - Dodaje jednu ili više klasa odabranim elementima
•     removeClass () - uklanja jednu ili više klasa iz odabranih elemenata
•     toggleClass () - Prebacuje između dodavanja / uklanjanja klasa iz odabranih elemenata
•     css () - Postavlja ili vraća atribut stila

 

Sljedeća tablica stilova upotrebljavat će se za sve primjere na ovoj stranici:

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}

 

addClass() metoda

 

Sljedeći primjer prikazuje kako dodati atribute klase različitim elementima.

 

Naravno pri dodavanju klase možete odabrati više elemenata:

 

$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});

 

Također možete odrediti više klasa unutar metode addClass():

 

$("button").click(function(){
  $("#div1").addClass("important blue");
});

 

removeClass() metoda

 

Sljedeći primjer pokazuje kako ukloniti određeni atribut klase iz različitih elemenata:

 

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

 

toggleClass() metoda

 

Sljedeći će primjer pokazati kako se upotrebljava metoda jQuery toggleClass().

 

Ova metoda se prebacuje između dodavanja / uklanjanja klasa iz odabranih elemenata:

 

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

Metoda css () postavlja ili vraća jedno ili više svojstava stila za odabrane elemente.

 

Vratite CSS entitet

 

Za povratak vrijednosti određenog CSS svojstva koristite sljedeću sintaksu:

 

css("propertyname");

 

Sljedeći će primjer vratiti vrijednost boje pozadine prvog podudaranog elementa:

 

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

 

Postavite CSS entitet

Za postavljanje određenog CSS svojstva koristite sljedeću sintaksu: css("propertyname","value");

 

 

Sljedeći će primjer postaviti vrijednost boje pozadine za SVE podudarne elemente:

 

$("p").css("background-color", "yellow");

 

 

Postavite više CSS svojstava

 

Za postavljanje više CSS svojstava koristite sljedeću sintaksu:

 

css({"propertyname":"value","propertyname":"value",...});

 

Sljedeći će primjer postaviti boju pozadine i veličinu fonta za SVE podudarne elemente:

 

$("p").css({"background-color": "yellow", "font-size": "200%"});