Comment changer la classe d'un élément HTML avec JavaScript ?

Dans la phase de conception d'une page Web ou d'un site Web, il existe certaines situations où vous n'avez plus besoin d'accéder à certains éléments particuliers en raison d'une mise à jour. De plus, lorsqu'il est nécessaire d'attribuer plus d'une classe à un élément spécifique en html. Dans de tels scénarios, changer la classe d'un élément HTML en JavaScript est d'une grande aide pour répondre à de telles situations.

Ce blog démontrera les approches à considérer lors de la modification de la classe d'un élément HTML en JavaScript.

Comment changer la classe d'un élément HTML avec JavaScript ?

Pour changer la classe d'un élément HTML avec JavaScript, les approches suivantes peuvent être appliquées :

• • ' nom du cours ' propriété.
  • ' classList ' propriété.

Approche 1 : modifier la classe d'un élément HTML avec JavaScript à l'aide de la propriété className

Cette approche peut entrer en vigueur en accédant à la classe créée associée à un élément et en lui attribuant une classe différente.

L'exemple suivant illustre le concept énoncé.

Exemple

Dans le code ci-dessous dans le ' ', incluez l'en-tête suivant dans le '

' étiquette. Après cela, créez le bouton spécifié qui se verra attribuer par défaut ' classer ” qui sera modifié plus tard dans le code. Aussi, attribuez-lui un ' identifiant » et une pièce jointe « sur clic ” événement invoquant la fonction Class().

Plus loin dans le code, incluez le message suivant dans le '

” tag pour l'afficher sur le DOM lors de la transformation de la classe :

Code HTML:

< corps style = 'text-align : centre ;' >
< h2 > Changer d'élément Nom de la classe

L'ancien nom de classe est : classe par défaut

Dans le code JS, déclarez une fonction nommée ' Classer() ”. Ici, accédez à la classe par défaut par son identifiant en utilisant le ' document.getElementById() ' méthode. La ' nom du cours ' La propriété transformera la classe créée en la classe nommée ' nouvelleClasse ”.

Finalement, le ' Texteintérieur ” la propriété affichera le message suivant avec la classe modifiée :

Code JS :

Production

Dans la sortie ci-dessus, observez le changement de ' classer ” à droite en cliquant sur le bouton dans DOM.

Approche 2 : modifier la classe d'un élément HTML avec JavaScript à l'aide de la propriété classList

Cette approche particulière peut être mise en œuvre pour supprimer la classe spécifiée et lui attribuer une nouvelle classe, la modifiant ainsi.

Exemple

Tout d'abord, répétez les méthodes décrites ci-dessus pour inclure un en-tête, créer un bouton avec la classe attribuée, l'identifiant et l'événement onclick attaché invoquant la fonction spécifiée. Ensuite, ajoutez de la même manière la section d'en-tête dans le '

” tag pour informer l'utilisateur de la classe modifiée lors du clic sur le bouton :

Code HTML

< corps style = 'text-align : centre ;' >
< h2 > Changer la classe de l'élément ! h2 >
< bouton classer = 'Site Internet' sur clic = 'Classer()' identifiant = 'monnaie' > Cliquez sur moi bouton >
< h3 identifiant = 'tête' style = 'couleur de fond : gris clair ;' > L'ancien nom de la classe est : Site Web h3 >
corps >

Maintenant, déclarez une fonction nommée ' Classer() ”. Dans sa définition, appliquer le « classList ' propriété avec le ' retirer() ” méthode pour omettre la classe accédée nommée “ Site Internet » qui correspond au bouton créé.

À l'étape suivante, affectez une nouvelle classe à la même classe en utilisant la propriété discutée avec le ' ajouter() ' méthode. Enfin, affichez la classe modifiée comme indiqué dans l'approche précédente :

Code JS

fonction Classer ( ) {
document.getElementById ( 'monnaie' ) .classList.remove ( 'Site Internet' )
document.getElementById ( 'monnaie' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'monnaie' ) .classList ;
document.getElementById ( 'tête' ) .innerHTML = 'Le nouveau nom de classe est : ' + accès ;
}

Production

Cette rédaction visait à clarifier le concept de modification de la classe de l'élément HTML à l'aide de JavaScript.

Conclusion

La ' nom du cours ' et ' classList ” Les propriétés peuvent être utilisées pour changer la classe d'un élément HTML. La propriété className a conduit à une approche plus rapide dans l'exécution de l'exigence souhaitée par rapport à la propriété classList car elle impliquait moins de complexité de code. La propriété classList, d'autre part, a changé la classe par défaut à l'aide de deux méthodes supplémentaires. Cet article a illustré les approches pour changer la classe de l'élément HTML avec JavaScript.