Comment basculer la classe en utilisant un javascript pur en html?

La mise en place d'une classe utilisant du javascript pur dans HTML est utile lorsque vous souhaitez modifier l'apparence d'un élément basé sur une certaine condition, comme l'interaction utilisateur. Par exemple, modifier la couleur d'arrière-plan de la page ou du bouton lors de l'événement de clic. Basculer une classe permet de modifier dynamiquement les modifications, sans avoir à actualiser la page. Cela peut aider à augmenter l'expérience utilisateur en rendant les changements plus lisses et plus réactifs.

Ce message illustra la procédure pour basculer la classe à l'aide de JavaScript.

Comment basculer la classe CSS en utilisant Pure JavaScript dans HTML?

Pour basculer les classes à l'aide de JavaScript pur, utilisez le «basculer()«Méthode du«liste de classe”Attribut / propriété. La méthode toggle () accepte un nom de classe comme paramètre. Basculer une classe signifie changer la présence d'une classe sur un élément en HTML. Il s'agit de vérifier si une classe est présente sur un élément, et si c'est le cas, le supprimer. Si la classe n'est pas affectée à l'élément, elle est ajoutée.

Exemple 1: Modifiez la couleur de l'élément par classe de basculement en utilisant un javascript pur en html
Dans l'exemple suivant, nous modifierons la couleur d'arrière-plan du bouton sur le bouton cliquer en basculé de la classe.

Tout d'abord, créez un bouton et attribuez un ID "btn«Pour coiffer le bouton. Attacher un «sur clic”Événement qui invoquera le«classtoggle ()”Fonction sur le bouton CLIC:

Bouton

Dans le fichier CSS, créez un ID "btn«Pour styliser le bouton:

#btn
rembourrage: 3px;
marge: 2px;
Font-Family: Sans-Serif;
Border-Radius: .5rem;

Créer une classe nommée "jaune«Pour définir la couleur d'arrière-plan de l'élément:

.jaune
Color d'arrière-plan: jaune;

Dans le fichier javascript, définissez une fonction "classtoggle ()«Cela appellera le«basculer()«Méthode du«liste de classe”Propriété pour basculer la classe des boutones:

fonction classtoggle ()
document.getElementByid ("btn").liste de classe.basculer («jaune»);

Comme vous pouvez le voir dans la sortie tout en cliquant sur le bouton, la couleur d'arrière-plan change, cela indique que le «jaune"La classe a été affectée avec succès au bouton à l'aide du"basculer()«Méthode du«liste de classe" propriété:

Exemple 2: Modifiez la police de l'élément par classe de basculement en utilisant un javascript pur en html
Dans l'exemple donné, nous allons basculer la classe CSS pour changer de texte dans l'événement de clic du bouton.

Dans un fichier html, créez un

Tag pour afficher du texte et un bouton. Attribuez un ID "accueillir”Au texte qui aide à obtenir le texte et à affecter une classe en utilisant la méthode de bascule:

Bienvenue à Linuxhint

Cliquez sur

Créer une classe CSS "texte«Cela changera la couleur et la taille de la police du texte:

.texte
taille de police: 30px;
Couleur: # 06B5F5;

Définir une fonction "classtoggle ()"Pour affecter la classe"texte" au

Élément de balise sur le bouton cliquer qui sera récupéré à l'aide de l'ID attribué à l'aide de "getElementByid ()" méthode.

fonction classtoggle ()
document.GetElementByid ("Bienvenue").liste de classe.toggle ("texte");

On peut voir que le «texte"La classe est affectée au texte donné en cliquant sur le bouton:

Nous avons fourni toutes les instructions essentielles pertinentes pour basculer la classe en utilisant Pure JavaScript en HTML.

Conclusion

Pour basculer la classe à l'aide de JavaScript pur en HTML, utilisez le «basculer()«Méthode du«liste de classe" propriété. Il aide à affecter une classe à l'élément s'il lui est affecté. Ce message a illustré la procédure de basculement des classes à l'aide de JavaScript.