classlist javascript | Expliqué

Une fonctionnalité JavaScript DOM nommée "liste de classe«Peut être utilisé pour styliser les cours CSS d'un élément. Il s'agit d'une propriété JavaScript en lecture seule qui est utilisée pour représenter les informations incluses dans la propriété d'une classe d'élément. Plus précisément, les noms des classes CSS sont renvoyés par la liste de classe appelée.

Cet article illustra la propriété JavaScript de classlist et ses utilisations dans JavaScript.

Qu'est-ce que la liste de classe dans JavaScript?

Le "liste de classe"Est l'attribut en lecture seule Dom JavaScript représentant les données dans la propriété de la classe d'un élément. Il donne les noms des classes CSS comme sortie. En dépit d'être en lecture seule, la liste de classe peut toujours être utilisée pour changer les classes. De plus, vous pouvez modifier les classes CSS données à un élément HTML à l'aide de l'objet ClassList.

Syntaxe

Suivez la syntaxe donnée pour utiliser l'attribut classlist:

élément.classlist;

Ici le "élément«Est l'élément HTML.

Exemple

Dans cet exemple, nous créerons un bouton en attribuant une classe nommée «bouton»Et attachez l'événement onClick () qui publiera les noms de la classe attribuée au bouton lorsqu'il est déclenché:

Cliquez pour afficher la classe attribuée au bouton

Cliquez ici

Maintenant, nous allons définir le rayon de bordure du bouton comme «2 cm«Dans le fichier CSS:

.bouton
Border-Radius: 2cm;

Nous lierons la feuille de style avec le fichier HTML en utilisant le «" étiqueter:

Dans le fichier javascript, définissez une fonction "ButtonClick ()"De telle manière que lorsqu'elle est invoquée, tout d'abord, le document.bouton getElementById () Méthode d'accès à l'aide de son ID, puis affichez la classe attribuée au bouton dans une méthode alerte ():

function boutonclick ()
var click = document.getElementById ("btn");
alerte (cliquez.classlist);

Sortir

Voyons les méthodes de la propriété JavaScript de la liste de classe.

Quelles sont les méthodes de la propriété de liste de classe?

Il existe certaines méthodes de la propriété ClassList sont les suivantes:

• ajouter()
• retirer()
• basculer()
• contient()
• article()
• remplacer()

Le tableau donné ci-dessous comprend la description des méthodes mentionnées:

Méthodes	Description
ajouter()	Vous pouvez ajouter une ou plusieurs classes à un élément avec la méthode Add ().
retirer()	Pour éliminer les classes de la liste des classes de l'élément, utilisez la méthode supprime ().
basculer()	La baisse des noms de classe particulière d'un élément se fait en utilisant la méthode toggle (). La classe spécifiée est ajoutée en un clic, et la classe est supprimée en un autre clic.
contient()	Pour vérifier si la classe donnée existe dans l'élément ou non, utilisez la méthode contente ().
article()	Il est utilisé pour montrer les noms des classes qui sont présentes à l'index spécifique.
remplacer()	Une classe existante peut être remplacée par une nouvelle classe en utilisant la méthode Remplace ().

Maintenant, nous discuterons de certaines méthodes couramment utilisées de la liste de classe.

Exemple 1: Comment utiliser la méthode Add () de la propriété de liste de classe?

Nous ajouterons de nouvelles classes dans le bouton en cliquant sur le nouveau "Ajouter la classe au bouton»:

Ajouter la classe au bouton

Ensuite, créez deux classes "btncolor" et "texte en gras«Cela ajoutera la couleur d'arrière-plan des boutons et en gras du texte du bouton:

.btncolor
Color en arrière-plan: Blueviolet;

.texte en gras
Police-poids: Bold;

Dans le fichier javascript, définissez une fonction nommée "addClass ()«Cela appellera le«ajouter()”Méthode de la liste de classe avec le nom de la classe comme argument ajouté dans la classe du bouton:

fonction addClass ()
var newclass = document.getElementByid ("btn").classlist;
newclass.ajouter ("btncolor");
newclass.ajouter ("boldText");

La sortie indique que les nouvelles classes sont ajoutées dans le bouton "Cliquez ici" quand "Ajouter la classe au bouton"Est cliqué. Ensuite, cliquez sur le "Cliquez ici”Bouton pour afficher la liste des classes:

Exemple 2: Comment utiliser la méthode Suppor () de la propriété de liste de classe?

Nous allons maintenant supprimer une classe de la liste. Pour ce faire, nous créerons un nouveau bouton "Supprimer la classe du bouton”Et attachez un événement onclick () avec:

Supprimer la classe du bouton

Nous définirons une fonction "RemoveClass ()"Dans le fichier javascript pour supprimer la classe"btncolor«De la liste des classes:

fonction reposovelass ()
var newclass = document.getElementByid ("btn").classlist;
newclass.retirer ("btncolor");

Comme vous pouvez le voir dans la sortie, le «Cliquez ici"Bouton affiché une classe nommée"bouton"Et puis quand le"Ajouter la classe au bouton"Est cliqué, deux nouvelles classes"texte en gras" et "btncolor"Sont ajoutés à la liste, et la couleur d'arrière-plan du bouton est également modifiée. Enfin, en cliquant sur le «Supprimer la classe du bouton«Ra supprimera le «btncolor«Classe de la liste:

Exemple 3: comment utiliser la méthode toggle () de la propriété classlist?

Maintenant, nous utiliserons la méthode toggle () pour basculer la liste des classes en un clic et supprimerons sur un autre clic:

Bouton à bascule

Dans le fichier javascript, définissez une fonction "toggleclass ()"Cela ajoutera d'abord la couleur du bouton sur un clic, puis le supprime sur l'autre clic:

fonction toggleclass ()
var newclass = document.getElementByid ("btn").classlist;
newclass.toggle ("btncolor");

La sortie correspondante est la suivante:

Toutes les directives fondamentales pour la propriété JavaScript de liste de classe ont été couvertes.

Conclusion

Le "liste de classe"Est l'attribut en lecture seule de JavaScript qui donne les noms des classes CSS attribuées à l'élément HTML. Il permet de modifier les classes CSS à l'aide de ses méthodes prédéfinies, y compris Add (), retire (), toggle () et ainsi. Dans cet article, nous avons illustré la propriété JavaScript de classlist et ses méthodes avec des exemples détaillés.