jQuery - CSS-klassen ophalen en instellen
Met jQuery is het gemakkelijk om de stijl van elementen te manipuleren.
jQuery CSS manipuleren
jQuery heeft verschillende methoden voor CSS-manipulatie. We kijken naar de volgende methoden:
addClass()- Voegt een of meer klassen toe aan de geselecteerde elementenremoveClass()- Verwijdert een of meer klassen uit de geselecteerde elemententoggleClass()- Schakelt tussen het toevoegen/verwijderen van klassen van de geselecteerde elementencss()- Stelt het stijlkenmerk in of geeft het terug
Voorbeeld stylesheet
De volgende stylesheet 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 laat zien hoe u klasseattributen aan verschillende elementen kunt toevoegen. Natuurlijk kun je bij het toevoegen van klassen meerdere elementen selecteren:
Voorbeeld
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
addClass()U kunt binnen de methode ook meerdere klassen opgeven :
Voorbeeld
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() Methode
Het volgende voorbeeld laat zien hoe u een specifiek klassekenmerk uit verschillende elementen verwijdert:
Voorbeeld
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQuery toggleClass()-methode
Het volgende voorbeeld laat zien hoe u de jQuery- toggleClass()methode gebruikt. Deze methode schakelt tussen het toevoegen/verwijderen van klassen van de geselecteerde elementen:
Voorbeeld
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css() Methode
De jQuery- css()methode wordt in het volgende hoofdstuk uitgelegd.
jQuery-oefeningen
jQuery CSS-referentie
Ga voor een compleet overzicht van alle jQuery CSS-methoden naar onze jQuery HTML/CSS Reference .