Comment ajouter le nom de classe à l'élément HTML via JavaScript?

JavaScript fournit quelques approches pour ajouter le nom de classe à un élément HTML tel que le ".Méthode Add () ” et le ".nom du cours" propriété. Le nom de classe peut être ajouté aux éléments à l'aide du CSS (feuille de style en cascade) et JavaScript. Le but principal de l'ajout de nom de classe à un élément HTML est d'obtenir différentes fonctionnalités sur l'élément sélectionné en utilisant le nom de classe spécifié.

Les approches JavaScript ci-dessous peuvent être utilisées pour ajouter le nom de classe à un élément HTML:

• Qu'est-ce que ".Add () ”en javascript?
• Comment le ".Ajouter () ”la méthode fonctionne en javascript?
• Qu'est-ce que ".ClassName ”en javascript?
• Comment le ".ClassName »La propriété fonctionne en javascript?

Alors, commençons!

Qu'est-ce que ".Add () ”en javascript?

".Add () ”est une méthode intégrée de la propriété ClassList qui peut être utilisée pour ajouter le nom de classe à tout élément HTML spécifique. L'extrait ci-dessous vous permettra de comprendre comment utiliser le «.Ajouter la méthode en JavaScript:

élément.liste de classe.add ("class_name");

Comment le ".Ajouter () ”la méthode fonctionne en javascript?

Cette section présentera un guide étape par étape pour comprendre comment ajouter le nom de classe à un élément HTML à l'aide de JavaScript.

Dans ce programme, nous créerons trois fichiers un fichier «HTML», un fichier «CSS» et un fichier «javascript»:

Html

Comment ajouter le nom de classe à l'élément HTML via JavaScript?

Cliquez sur moi!

Cliquez sur le "cliquez sur moi!"Le bouton ajoutera le nom de classe à l'élément P suivant

Bienvenue à Linuxhint.com!!

Dans l'extrait ci-dessus, nous avons effectué les fonctionnalités suivantes:

• Nous avons utilisé le

  Tag pour ajouter un titre.

• Ensuite, nous avons utilisé la balise pour créer un bouton et l'avons nommée «Cliquez sur moi!".
• Invoqué le "classNameFun ()" chaque fois que l'utilisateur cliquet sur le bouton.
• Ensuite, nous avons créé un

  élément.

• Enfin, nous avons créé un paragraphe en utilisant

  élément et lui a attribué un id "addclass".

CSS

.style
Texte-aligne: Centre;
Style de police: italique;
Color en arrière-plan: noir;
Couleur blanche;

Le fichier CSS a servi les fonctions suivantes:

• Alignez le texte au centre à l'aide de la propriété «Text-Align».
• Définissez le style de police italique à l'aide de la propriété «de style police».
• Définissez la couleur d'arrière-plan noir à l'aide de la propriété «Color d'arrière-plan».
• Enfin, définissez la couleur du texte blanc à l'aide de la propriété «couleur».

Javascrip

fonction classNamefun ()
Laissez para = document.getElementById ("addClass");
para.liste de classe.ajouter ("style");

Le .Le fichier JS ou JavaScript a servi les fonctionnalités ci-dessous:

• Créé une fonction nommée "classNameFun ()".
• Utilisé la méthode GetElementById () pour lire / modifier un élément HTML ayant un ID «AddClass».
• Enfin, j'ai utilisé la méthode ADD pour ajouter le nom au

  élément.

Sortir
Au cours de l'exécution réussie du code, initialement, nous obtiendrons la sortie suivante:

Cliquez sur «Cliquez sur moi!”Le bouton générera la sortie ci-dessous:

C'est ainsi que le «.Ajouter () ”la méthode fonctionne en javascript.

Qu'est-ce que ".ClassName ”en javascript?

Le ".ClassName "est une propriété en JavaScript qui définit / renvoie les attributs de classe d'un élément HTML. Il peut être utilisé pour ajouter / spécifier le nom de classe à n'importe quelle balise HTML.

L'extrait suivant montrera la syntaxe de base du «.Propriété ClassName »:

élément.className = class_name;

Ici, le «class_name» représente le nom de la classe. Dans le cas de plusieurs classes, nous pouvons spécifier le nom des classes à l'aide de la syntaxe séparée par des virgules.

Comment le ".ClassName »La propriété fonctionne en javascript?

Voyons l'exemple donné ci-dessous pour obtenir la compréhension de base du «.propriété classname ".

Html

Comment ajouter le nom de classe à l'élément HTML via JavaScript?

Cliquez sur moi!

Cliquez sur le "cliquez sur moi!"Le bouton ajoutera le nom de classe à cet élément

La classe HTML a effectué les tâches suivantes:

• Utilisé le

  élément pour ajouter un titre.

• Tag utilisé pour créer un bouton et l'a nommé «Cliquez sur moi!".
• Invoqué le "classNameFun ()" chaque fois que l'utilisateur cliquet sur le bouton.
• Enfin, a créé un

  et lui a attribué un identifiant "addclass".

CSS

Le fichier CSS restera le même que dans l'exemple précédent.

Javascrip

fonction classNamefun ()
LET HELEMENT = DOCUMENT.getElementById ("addClass");
hement.className = "style";

Dans le fichier javascript, nous avons utilisé le getElementByid () Méthode pour lire / modifier un élément HTML ayant un ID ".addClass ". Ensuite, nous avons utilisé la méthode ADD pour ajouter le nom au

élément.

Sortir
Lorsque nous exécutons le programme ci-dessus, initialement, ce programme produira la sortie divisée ci-dessous:

Après avoir cliqué sur le «cliquez sur moi!”Bouton, le classNameFun () sera invoqué, par conséquent, nous obtiendrons la sortie suivante:

La sortie précise que le nom de classe a été ajouté avec succès au

élément.

Conclusion

En JavaScript, le «.Add () »Méthode et«.La propriété ClassName »est utilisée pour ajouter le nom de classe à n'importe quel élément HTML. Cet article a expliqué toutes les bases pour ajouter des noms de classe à n'importe quel élément HTML. Cet article a expliqué comment utiliser le «.Add () »Méthode et«.Propriété ClassName »à l'aide de quelques exemples appropriés.