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 de HTML. Dans de tels cas céréaliers, 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 tout en modifiant une classe d'élément HTML en JavaScript.
Comment changer la classe d'un élément HTML avec JavaScript?
Pour modifier la classe d'un élément HTML avec JavaScript, les approches suivantes peuvent être appliquées:
-
- "nom du cours" propriété.
- "liste de classe" propriété.
Approche 1: Modifiez la classe d'un élément HTML avec JavaScript en utilisant 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 démontre le concept déclaré.
Exemple
Dans le code divisé ci-dessous dans le «”Tag, incluez le titre suivant dans le«" étiqueter. Après cela, créez le bouton spécifié qui se verra attribuer une valeur par défaut "classe”Qui sera modifié plus tard dans le code. Affectez également-lui un «identifiant"Et un" attaché "sur clic”Événement invoquant la classe de fonction ().
Plus tard dans le code, incluez le message suivant dans le « Code HTML: Changer le nom de la classe de l'élément Le nom de la classe Old Class est: Classe par défaut Finalement, le "texte de texte»La propriété affichera le message suivant avec la classe modifiée: Code js: Approche 2: Modifiez la classe d'un élément HTML avec JavaScript en utilisant la propriété Classlist Cette approche particulière peut être implémentée pour supprimer la classe spécifiée et y attribuer une nouvelle classe, le modifiant ainsi. Exemple Tout d'abord, répétez les méthodes discutées ci-dessus pour inclure un titre, créant un bouton avec la classe attribuée, l'ID et l'événement ONClick attaché invoquant la fonction spécifiée. Ensuite, ajoutez également la section de cap dans le « Code HTML Changer la classe d'élément! Dans 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 discuté dans l'approche précédente: Code JS Conclusion Le "nom du cours" et "liste de classe»Les propriétés peuvent être utilisées pour modifier 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é de liste de classe car elle impliquait moins de complexité de code. La propriété ClassList, en revanche, a changé la classe par défaut à l'aide de deux méthodes supplémentaires. Cet article a illustré les approches pour modifier la classe de l'élément HTML avec JavaScript.
Clic
Dans le code JS, déclarez une fonction nommée «Classe()". Ici, accédez à la classe par défaut par son identifiant en utilisant le «document.getElementByid ()" méthode. Le "nom du cours"La propriété transformera la classe créée en classe nommée"newclass".Function class ()
document.GetElementByid («Mybutton»).className = "newClass";
Var Access = Document.GetElementByid («Mybutton»).nom du cours;
document.getElementByid ('tête').innerhtml = "Le nom du nouveau classe est:" + Access;
Sortir
Dans la sortie ci-dessus, observez le changement du «classe"À droite en cliquant sur le bouton dans DOM.Le nom de la classe Old Class est: Site Web
Maintenant, déclarez une fonction nommée «Classe()". Dans sa définition, appliquez le «liste de classe«Propriété avec le«retirer()«Méthode pour omettre la classe accessible nommée«Site Internet”Qui correspond au bouton créé.Function class ()
document.GetElementByid («changement»).liste de classe.Supprimer ("site Web")
document.GetElementByid («changement»).liste de classe.Add ("LinuxHint");
Var Access = Document.GetElementByid («changement»).classlist;
document.getElementByid ('tête').innerhtml = "Le nom du nouveau classe est:" + Access;
Sortir
Cet article signifiait effacer le concept de modification de la classe de l'élément HTML à l'aide de JavaScript.