Ce manuel vous expliquera la procédure d'ajout d'une classe active en JavaScript.
Comment ajouter une classe active en JavaScript ?
Pour ajouter une classe active, nous utiliserons les méthodes suivantes :
Passons à la première méthode !
Méthode 1 : Utilisez document.getElementById() avec la méthode classList.add() pour ajouter une classe active en JavaScript
En JavaScript, le ' document.getElementById() ” est utilisée pour accéder à un certain élément par son identifiant. Cependant, il sélectionne uniquement les éléments en fonction de leurs identifiants, pas des classes. Vous pouvez l'utiliser avec le ' classList.add() ” méthode pour ajouter une classe active en JavaScript.
Explorons cette méthode en prenant un exemple.
Exemple
Dans notre fichier HTML, nous prendrons le ' ” tag avec du texte, spécifiez son identifiant comme “ SMS », et ajoutez un « sur clic ” événement qui déclenchera le “ Activer() ' fonction. Notez que, ajoutez la balise
dans la balise
: < identifiant p = 'SMS' sur clic = 'Activer()' > Appuyez ici p >Dans le fichier JavaScript, définissez la fonction activate() de manière à ce qu'elle accède d'abord à l'élément paragraphe en utilisant son identifiant dans la méthode document.getElementbyId(). Ensuite, ajoutez une classe CSS à sa liste de classes à des fins de style :
fonction activer ( ) {
Il y a un = document. getElementById ( 'SMS' ) ;
un. classList . ajouter ( 'nouvelle classe' ) ;
}
Dans le fichier CSS, placez un point avant ' nouvelle classe ' et attribuez le ' Couleur de l'arrière plan 'propriété une valeur' orange ” :
. nouvelle classe {Contexte - Couleur : orange ;
}
De ce fait, lorsque vous cliquerez sur l'élément paragraphe, la propriété background ajoutée lui sera appliquée :
Examinons la méthode suivante dans laquelle nous utiliserons le document.querySelector() pour ajouter une classe active.
Méthode 2: utilisez document.querySelector() avec la méthode classList.add() pour ajouter une classe active en JavaScript
En JavaScript, le ' document.querySelector() ” La méthode est utilisée pour obtenir le premier élément du code. Vous pouvez spécifier des classes et des identifiants dans la méthode querySelector(). Il peut être utilisé avec le ' classList.add() ” méthode pour ajouter une classe active en JavaScript.
Exemple
Nous n'utiliserons plus que le ' document.querySelector() « avec identifiant » #SMS ” pour sélectionner l'élément de paragraphe. Encore une fois, la méthode classList.add() sera utilisée pour ajouter le ' nouvelle classe ” :
fonction activer ( ) {Il y a un = document. querySelector ( '#SMS' ) ;
un. classList . ajouter ( 'nouvelle classe' ) ;
}
Production
Nous avons appris deux méthodes les plus simples pour ajouter une classe active en JavaScript
Conclusion
Pour ajouter une classe active, nous pouvons utiliser le ' getElementById() ' ou ' querySelector() ” avec la méthode classList.add(). Les deux méthodes mentionnées obtiennent d'abord les éléments par leur identifiant, puis en utilisant la méthode classList.add(), le nouveau nom de classe attribué à l'élément qui peut être utilisé à des fins de style. Ce billet a décrit la procédure liée à l'ajout d'une classe active en JavaScript.