Basculer la classe avec JavaScript

1. Toggle Classe d’un élément HTML au survol de la souris en JavaScript
2. Basculer la classe d’un élément HTML sur un clic de souris dans JavaScript

Nous allons introduire une méthode pour basculer la classe des éléments HTML en utilisant JavaScript.

Toggle Classe d’un élément HTML au survol de la souris en JavaScript

Basculer la classe signifie que s’il n’y a pas de nom de classe attribué à l’élément HTML, alors un nom de classe peut être défini dynamiquement, ou si une classe spécifique est déjà présente, alors elle peut être supprimée dynamiquement. En informatique, mouseover est un élément de contrôle graphique activé lorsque l’utilisateur déplace ou survole le pointeur sur une zone de déclenchement, généralement avec une souris.

La fonctionnalité de basculement est introduite dans JavaScript. Dans le fichier JavaScript, nous utilisons une méthode querySelector() qui renvoie le premier élément qui correspond à un ou plusieurs sélecteurs CSS spécifiés dans le document. Dans le fichier ci-dessous, l’identifiant #container est associé à l’élément <div> ; par conséquent, nous avons obtenu l’élément <div> sur un conteneur de variables. Pour obtenir la fonctionnalité requise de basculement des classes au survol d’une souris, nous devons utiliser la méthode addEventListener(), qui attache un gestionnaire d’événements au document HTML. Et les événements réels que nous avons utilisés sont les événements mouseenter et mouseleave. L’événement mouseenter se produit lorsque le pointeur de la souris est déplacé sur un élément. L’événement mouseleave se produit lorsque le pointeur de la souris est déplacé hors de l’élément.

Lorsque l’événement mouseenter se produit, nous utilisons la propriété classList, les méthodes add() et remove(). Lorsque le pointeur de la souris est déplacé sur la classe d’éléments <div>, le premier élément div est supprimé par la méthode remove() et la classe second est ajoutée à l’élément <div>. De même, lorsque le pointeur de la souris est déplacé vers l’extérieur, il ajoute la classe first et supprime la classe second. Par conséquent, le basculement est obtenu lorsque la souris a survolé l’élément <div>.

Nous avons un document HTML où les liens vers le fichier CSS styles.css et le fichier JavaScript index.js sont spécifiés sur le document HTML en utilisant respectivement les balises <link> et <script></script>. Nous voulons obtenir la fonctionnalité de survoler le pointeur de la souris sur l’élément <div> sa classe à basculer. Nous allons le faire en utilisant JavaScript. En HTML, nous avons l’élément <div> identifié de manière unique par le conteneur id, et une classe first est déjà associée au même élément.

En CSS, nous définissons les propriétés et les valeurs des sélecteurs de classe. Nous avons simplifié le CSS, et la classe first a une propriété background et sa valeur est verte. De même, la classe second a une propriété background et une valeur orange.

Exemple de code :

<div id="container" class="first">
  <h1>
    JavaScript is Easy
  </h1>
</div>

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function() {
  this.classList.remove('first');
  this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
  this.classList.add('first');
  this.classList.remove('second');
})

.first {
    background: green;
}

.second {
    background: orange;
}

Basculer la classe d’un élément HTML sur un clic de souris dans JavaScript

Nous pouvons basculer une classe HTML en utilisant JavaScript sur un clic de souris comme nous l’avons fait pour la souris sur l’événement dans la méthode ci-dessus. Par exemple, créez un paragraphe avec une balise <p> avec l’id de p. Écrivez du texte à l’intérieur de la balise. Ensuite, créez une balise <button> avec l’attribut onclick. Appelez la fonction myFunc() avec l’attribut onclick. Écrivez le texte Button entre les balises.

En CSS, sélectionnez le paragraphClass avec le sélecteur de classe et donnez la font-size à 30px et color à red. En JavaScript, écrivez la fonction myFunc() et sélectionnez l’identifiant p du HTML avec getElementById et stockez dans une variable para. Appelez la propriété classList puis la méthode toggle() avec la variable. Ecrivez la classe paragraphClass comme paramètre de la méthode toggle().

Nous avons récupéré l’élément p dans la variable para en utilisant la méthode getElementById() . En utilisant la propriété classList, nous avons utilisé la fonction toggle() pour l’élément <p> du document HTML. Lorsque le bas est cliqué et que myFunc() est exécuté, le sélecteur de classe CSS paragraphClass est activé et désactivé sur l’élément <p>. Par conséquent, le basculement est obtenu en cliquant sur le bas de la souris.

Exemple de code :

<p id="p">
        Click Button to toggle between classes
</p>
<button onclick="myFunc()">
        Button
</button>

      .paragraphClass {
            font-size: 30px;
            color: red;
        }

function myFunc() {
  var para = document.getElementById('p');
  para.classList.toggle('paragraphClass');
}