Comment ajouter une classe active en javascript

Lors du développement d'un site Web, votre code devient parfois si long et complexe que vous ne pouvez pas ajouter ou supprimer les ID ou classes CSS individuellement. Pour lutter contre de telles situations, vous pouvez utiliser JavaScript pour ajouter des classes actives pour le style ou pour atteindre d'autres fins. JavaScript fournit différentes méthodes pour résoudre instantanément le problème complexe déclaré.

Ce manuel 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:

• document.getElementByid ()
• document.QuerySelector ()

Passons à la première méthode!

Méthode 1: Utiliser le document.getElementById () avec classlist.Ajouter () méthode pour ajouter une classe active en javascript

En JavaScript, le «document.getElementByid ()«La méthode est utilisée pour accéder à un certain élément par son identifiant. Cependant, il ne sélectionne que les éléments en fonction de leurs identifiants, pas des classes. Vous pouvez l'utiliser avec le "liste de classe.ajouter()”Méthode pour ajouter une classe active dans 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 le

Tag dans la balise:

Appuyez ici

Dans le fichier javascript, définissez la fonction activate () de manière à ce qu'il accède d'abord à l'élément de paragraphe en utilisant son identifiant dans le document.Méthode GetElementById (). Ensuite, ajoutez une classe CSS à sa liste de classe à des fins de style:

fonction activate ()
var a = document.getElementById ("txt");
un.liste de classe.ajouter ("newClass");

Dans le fichier CSS, placez un point avant "newclass»Et attribuez le«Couleur de l'arrière plan«Propriété une valeur«orange»:

.newClass
Color en arrière-plan: orange;

En conséquence, lorsque vous cliquez sur l'élément de paragraphe, la propriété d'arrière-plan ajoutée sera appliquée:

Jetons un coup d'œil à la méthode suivante dans laquelle nous utiliserons le document.queySelector () pour ajouter une classe active.

Méthode 2: Utiliser le document.quereyselector () avec classlist.Ajouter () méthode 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 ID à la fois dans la méthode QueySelector (). Il peut être utilisé avec le «liste de classe.ajouter()”Méthode pour ajouter une classe active dans JavaScript.

Exemple

Nous n'utiliserons maintenant que le «document.QuerySelector ()"Avec id"#SMS"Pour sélectionner l'élément de paragraphe. Encore une fois, la liste de classe.La méthode Add () sera utilisée pour ajouter le actif "newclass»:

fonction activate ()
var a = document.queySelector ("# txt");
un.liste de classe.ajouter ("newClass");

Sortir

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 liste de classe.Méthode Add (). Les deux méthodes mentionnées obtiennent d'abord des éléments par leur identifiant, puis en utilisant la liste de classe.Ajouter () Méthode, le nouveau nom de classe attribué à l'élément qui peut être utilisé à des fins de style. Ce message a décrit la procédure liée à l'ajout d'une classe active en javascript.