Ajouter une classe à l'élément cliqué à l'aide de JavaScript

Lors de la création d'une page ou d'un site Web réactive, il peut y avoir une exigence pour ajouter diverses fonctionnalités ou effets sur l'action des utilisateurs ou automatiquement. Par exemple, en surlitant une section ou un élément spécifique lors du clic / du plan. Dans de telles situations, l'ajout de classe à un élément cliqué à l'aide de JavaScript est d'une grande aide pour engager les utilisateurs sur un site Web et le faire ressortir (site).

Cet article discutera des approches pour ajouter une classe à un élément cliqué à l'aide de JavaScript.

Comment ajouter une classe à l'élément cliqué en utilisant JavaScript?

Le "addEventListener ()»Méthode, en combinaison avec le«liste de classe«Propriété et le«ajouter()"Méthode, peut être appliquée pour ajouter une classe à l'élément cliqué à l'aide de JavaScript.

La méthode addEventListener () associe un événement à un élément. La propriété ClassList donne les noms de classe CSS d'un élément. Tandis que l'ajout () est une méthode de liste de classe utilisée pour ajouter des jetons à la liste.

Ces approches peuvent être appliquées pour attacher un événement et ajouter une classe aux éléments en fonction de cet événement.

Syntaxe

élément.addEventListener (événement, écouter, utiliser);

Dans la syntaxe donnée:

• "événement»Fait référence à l'événement spécifié.
• "écouter"Est la fonction qui doit être invoquée.
• "utiliser"Est la valeur facultative.

Élaborons le concept à l'aide des exemples suivants!

Exemple 1: Ajoutez une seule classe à l'élément cliqué dans JavaScript

Dans cet exemple, une seule classe sera ajoutée aux éléments cliqués:

Cliquez sur moi

Dans l'extrait de code ci-dessus:

• Tout d'abord, incluez le «" et "»Éléments, ayant les classes déclarées, respectivement.
• Incluez également un bouton à l'étape suivante.
• Dans le bloc de code JS, appliquez le «addEventListener ()"Méthode pour attacher un événement"Cliquez sur"À la fonction nommée"ClassClicked ()".
• Aussi, passez l'objet "événement"En tant que paramètre d'une fonction.
• Dans la définition de la fonction, associez le «événement"Objet avec le"cible" propriété. Ces approches accèdent aux éléments DOM sur le déclencheur de l'événement.
• En conséquence, les associés «liste de classe»Propriété et«ajouter()"La méthode ajoutera la classe spécifiée au (s) élément (s) en clic.
• Dans le code CSS, style la classe à ajouter, je.e., classe ajoutée.

Sortir

Comme observé dans la sortie ci-dessus, en cliquant sur les éléments, la classe particulière est ajoutée aux éléments.

Exemple 2: Ajoutez plusieurs classes à l'élément cliqué dans JavaScript

Dans cet exemple particulier, plusieurs classes seront ajoutées à l'élément cliqué:

Site Web de Linuxhint

Javascrip

Blogs

Appliquez les étapes suivantes, comme indiqué dans le code ci-dessus:

• Inclure le déclaré "

  »Éléments ayant les classes spécifiées.

• Dans le bloc de code JavaScript, également joint un événement "Cliquez sur”À la fonction classclicked () en utilisant le«addEventListener ()" méthode.
• Rappelez-vous les approches discutées pour accéder aux éléments sur le DOM.
• Maintenant, appliquez le «liste de classe»Propriété et«ajouter()”Méthode ayant plusieurs classes comme paramètres.
• Cela se traduira par l'ajout des plusieurs classes indiquées à l'élément cliqué (s).
• Dans le code CSS, spécifiez les classes qui doivent être ajoutées à l'élément (s) et effectuez le style indiqué.

Sortir

Dans cette sortie particulière, plusieurs classes sont annexées à chacun des ««> ”Éléments sur le déclencheur de l'événement.

Conclusion

Le "addEventListener ()»Méthode, en combinaison avec le«liste de classe«Propriété et le«ajouter()"Méthode, peut être appliquée pour ajouter une classe à l'élément cliqué à l'aide de JavaScript. Ces approches peuvent être implémentées pour ajouter des classes uniques ou multiples à des éléments en fonction de l'événement joint. Cet article a démontré pour ajouter une classe à l'élément cliqué en utilisant JavaScript.