Deze handleiding legt de procedure uit voor het toevoegen van een actieve klasse in JavaScript.
Hoe een actieve klasse in JavaScript toe te voegen?
Om een actieve klasse toe te voegen, gebruiken we de volgende methoden:
Laten we naar de eerste methode gaan!
Methode 1: Gebruik document.getElementById() With classList.add() Methode om actieve klasse in JavaScript toe te voegen
In JavaScript wordt de ' document.getElementById() ”-methode wordt gebruikt om toegang te krijgen tot een bepaald element via zijn id. Het selecteert echter alleen de elementen op basis van hun id's, niet op klassen. U kunt het gebruiken met de ' classList.add() ”-methode voor het toevoegen van een actieve klasse in JavaScript.
Laten we deze methode onderzoeken aan de hand van een voorbeeld.
Voorbeeld
In ons HTML-bestand nemen we de ' ” tag met wat tekst, specificeer de id als “ tekst ”, en voeg een “ bij klikken ” gebeurtenis die de “ activeren() ” functie. Merk op dat, voeg de
tag toe binnen de
tag: < p id = 'tekst' bij klikken = 'activeren()' > Klik hier p >Definieer in het JavaScript-bestand de functie active() op zo'n manier dat deze eerst toegang krijgt tot het alinea-element met behulp van zijn id in de document.getElementbyId()-methode. Voeg vervolgens een CSS-klasse toe aan de klassenlijst voor stijldoeleinden:
functie activeren ( ) {
er is een = document. getElementById ( 'tekst' ) ;
a. klasseLijst . toevoegen ( 'nieuwe klasse' ) ;
}
Plaats in het CSS-bestand een punt voor “ nieuwe klasse ” en wijs de “ Achtergrond kleur ” eigenschap een waarde “ oranje ”:
. nieuwe klasse {achtergrond - kleur : oranje ;
}
Als gevolg hiervan, wanneer u op het alinea-element klikt, wordt de toegevoegde achtergrondeigenschap erop toegepast:
Laten we eens kijken naar de volgende methode waarin we document.querySelector() zullen gebruiken om een actieve klasse toe te voegen.
Methode 2: Gebruik document.querySelector() met classList.add() Methode om actieve klasse toe te voegen in JavaScript
In JavaScript wordt de ' document.querySelector() ”-methode wordt gebruikt om het eerste element uit de code te halen. U kunt klassen en id's beide opgeven binnen de methode querySelector(). Het kan worden gebruikt met de ' classList.add() ”-methode voor het toevoegen van een actieve klasse in JavaScript.
Voorbeeld
We gebruiken nu alleen de “ document.querySelector() ' met id ' #tekst ” om het alinea-element te selecteren. Nogmaals, de methode classList.add() zal worden gebruikt om de actieve ' nieuwe klasse ”:
functie activeren ( ) {er is een = document. querySelector ( '#tekst' ) ;
a. klasseLijst . toevoegen ( 'nieuwe klasse' ) ;
}
Uitgang:
We hebben twee eenvoudigste methoden geleerd om actieve klasse in JavaScript toe te voegen
Conclusie
Om actieve klasse toe te voegen, kunnen we de ' getElementById() ' of ' querySelector() ” met de classList.add() methode. Beide genoemde methoden krijgen eerst elementen op hun id en gebruiken vervolgens de classList.add() methode, de nieuwe klassenaam die is toegewezen aan het element dat kan worden gebruikt voor opmaakdoeleinden. Dit bericht heeft de procedure beschreven met betrekking tot het toevoegen van een actieve klasse in JavaScript.