jQuery henter og sætter CSS-klasser

Gennem jQuery kan du nemt operere med CSS-elementer.

jQuery opererer CSS

jQuery har flere metoder til at udføre CSS-opereringer. Vi vil lære nedenstående metoder:

  • addClass() - Tilføj en eller flere klasser til de valgte elementer
  • removeClass() - Fjern en eller flere klasser fra de valgte elementer
  • toggleClass() - Udfør en skift operation af at tilføje/fjerne klasser til de valgte elementer
  • css() - Indstil eller returner stil egenskaber

Eksempel stilark

Følgende stilark bruges til alle eksemplerne på denne side:

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

jQuery addClass() metode

Følgende eksempel viser, hvordan man tilføjer klasser til forskellige elementer. Selvfølgelig kan du også vælge flere elementer, når du tilføjer klasser:

Eksempel

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

Prøv det selv

Du kan også specificere flere klasser i addClass() metoden:

Eksempel

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

Prøv det selv

jQuery removeClass() metode

Følgende eksempel demonstrerer, hvordan man fjerner specifikke klasser fra forskellige elementer:

Eksempel

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

Prøv det selv

jQuery toggleClass() metode

Følgende eksempel viser, hvordan man bruger jQuery toggleClass() metoden. Denne metode udfører en skift operation af at tilføje/fjerne klasser til de valgte elementer:

Eksempel

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

Prøv det selv

jQuery css() metode

Vi vil forklare jQuery css() metoden i det næste kapitel.

jQuery HTML reference manual

For fuld indhold af jQuery CSS-metoder, besøg vores jQuery CSS operations reference manual