jQuery hämta och sätta CSS-klasser

Genom jQuery kan du enkelt manipulera CSS-element.

jQuery CSS-operationer

jQuery har flera metoder för att utföra CSS-operationer. Vi kommer att lära oss följande:

  • addClass() - Lägg till en eller flera klasser till valda element
  • removeClass() - Ta bort en eller flera klasser från valda element
  • toggleClass() - Utför en växling av att lägga till eller ta bort klasser för valda element
  • css() - Sätt eller returnera stilattribut

Exempel stylesheet

Följande stylesheet används för alla exempel på denna sida:

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

jQuery addClass() metod

Följande exempel visar hur man lägger till klasser till olika element. Naturligtvis kan du också välja flera element när du lägger till en klass:

Exempel

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

Prova själv

Du kan också ange flera klasser i addClass() metoden:

Exempel

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

Prova själv

jQuery removeClass() metod

Följande exempel visar hur man tar bort specifika klasser från olika element:

Exempel

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

Prova själv

jQuery toggleClass() metod

Följande exempel visar hur man använder jQuery toggleClass() metod. Denna metod utför en växling av att lägga till eller ta bort klasser för valda element:

Exempel

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

Prova själv

jQuery css() metod

Vi kommer att förklara jQuery css()-metoden i nästa kapitel.

jQuery HTML manual

För en fullständig översikt över jQuery CSS-metoder, besök vår jQuery CSS operations manual