jQuery Get and Set CSS Classes

Through jQuery, it is easy to manipulate CSS elements.

jQuery CSS Operations

jQuery has several methods for CSS operations. We will learn the following:

  • addClass() - Add one or more classes to selected elements
  • removeClass() - Remove one or more classes from selected elements
  • toggleClass() - Toggle the addition/removal of classes on selected elements
  • css() - Set or return style properties

Example Stylesheet

Ang sumusunod na stylesheet ay gagamitin sa lahat ng halimbawa sa pahina na ito:

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

jQuery addClass() Method

Ang sumusunod na halimbawa ay magpapakita kung paano idagdag ang class attribute sa iba't ibang elemento. Natural na, maaari ka ring piliin ang ilang elemento kapag nagdagdag ng klase:

Example

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

Subukan nang personal

Maaari mo ring magbigay ng ilang klase sa addClass() method:

Example

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

Subukan nang personal

jQuery removeClass() Method

Ang sumusunod na halimbawa ay nagpapakita kung paano alisin ang tinukoy na class attribute mula sa iba't ibang elemento:

Example

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

Subukan nang personal

jQuery toggleClass() Method

Ang sumusunod na halimbawa ay magpapakita kung paano gamitin ang jQuery toggleClass() method. Ang method na ito ay nagbibigay-daan sa pagdagdag at pag-alisin ng klase sa napiling elemento:

Example

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

Subukan nang personal

jQuery css() Method

Ahat ay magsasalita sa susunod na kabanata tungkol sa jQuery css() method.

jQuery HTML Reference Manual

Para sa kumpletong nilalaman ng jQuery CSS method, mangyaring bisitahin ang aming jQuery CSS Operation Manual