jQuery haalt CSS-klassen op en stelt ze in

Met jQuery kun je eenvoudig CSS-elementen manipuleren.

jQuery CSS-operaties

jQuery heeft verschillende methoden voor CSS-operaties. We zullen de volgende leren:

  • addClass() - Voeg een of meerdere klassen toe aan de geselecteerde elementen
  • removeClass() - Verwijder een of meerdere klassen van de geselecteerde elementen
  • toggleClass() - Voer een schakeling uit van het toevoegen of verwijderen van klassen voor de geselecteerde elementen
  • css() - Stel in of retourneer stijl-eigenschappen

Voorbeeld stijltafel

Deze stijltafel wordt gebruikt voor alle voorbeelden op deze pagina:

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

jQuery addClass() methode

Het volgende voorbeeld toont hoe je class-eigenschappen kunt toevoegen aan verschillende elementen. Natuurlijk kun je ook meerdere elementen kiezen bij het toevoegen van klassen:

Voorbeeld

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

Probeer het zelf

Je kunt ook meerdere klassen specificeren in de addClass() methode:

Voorbeeld

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

Probeer het zelf

jQuery removeClass() methode

Het volgende voorbeeld demonstreert hoe je een specifieke class-eigenschap kunt verwijderen van verschillende elementen:

Voorbeeld

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

Probeer het zelf

jQuery toggleClass() methode

Het volgende voorbeeld toont hoe je de jQuery toggleClass() methode kunt gebruiken. Deze methode voert een schakeling uit van het toevoegen of verwijderen van klassen voor de geselecteerde elementen:

Voorbeeld

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

Probeer het zelf

jQuery css() methode

We zullen in het volgende hoofdstuk de jQuery css() methode uitleggen.

jQuery HTML handleiding

Voor het volledige overzicht van de jQuery CSS-methoden, bezoek onze jQuery CSS handleiding