Het toevoegen van een klasse-eigenschap aan een element helpt de ontwikkelaar om een dynamische gebruikerservaring op de webpagina te creëren. Wanneer een klasse-eigenschap aan een element wordt toegevoegd, krijgt dat geselecteerde element de stijl die bij die klassenaam hoort.
Denk aan een gebruiker door op een knop te klikken. Wanneer op de knop wordt geklikt, willen we dat een gedeelte van de webpagina verandert volgens onze CSS-stylesheet. U kunt een klassenaam toewijzen die aan deze stijl is gekoppeld om het uiterlijk ervan te wijzigen nadat u op de knop hebt geklikt.
Het creëren van een interactieve ervaring is belangrijk bij alle front-end-programmering. In deze handleiding onderzoeken we twee manieren om een klassenaam toe te voegen aan een geselecteerd element in gewoon JavaScript. Uiteindelijk zult u deze tool in uw projecten kunnen gebruiken.
JavaScript gebruiken Klasse toevoegen
In JavaScript kan het toevoegen van een klassenaam op twee manieren worden gedaan. Eerst selecteren we het gewenste HTML-element. Dan hebben we de mogelijkheid om de className of add () eigenschap te gebruiken om de naam van de klasse aan het element toe te voegen. We zullen de syntaxis doornemen en gebruiken in de volgende sectie.
Onthoud dat we hier eenvoudig JavaScript gebruiken. Er zijn geen bibliotheken nodig. Omdat we JavaScript regelmatig gebruiken, is het gebruikelijk om de bovenstaande logica in een functie te verpakken en die functie door te geven aan een gebeurtenishandler. Dit zorgt ervoor dat de functie om de klassenaam toe te voegen alleen optreedt nadat een specifieke gebeurtenis heeft plaatsgevonden.
Wat HTML-elementen betreft, deze kunnen meerdere klassenamen hebben. Dit is handig om te onthouden dat we klassenamen kunnen toevoegen aan elementen die al andere klassenamen of ID`s hebben. Het enige dat we moeten onthouden, is dat de stijl is gekoppeld aan de klassenamen in ons project en de namen toevoegen aan de elementen waarop we de stijl willen toepassen.
