Avec classList, à moindre frais, manipuler les class sur les éléments de la page peut améliorer votre site.

sélectionner

Le DOM est un arbre d’éléments correspondant à votre document HTML. JavaScript permet de manipuler cette arbre.
Cette ligne vous permet de cibler un élément dans votre page et de le mémoriser.

var menuButton = document.querySelector('#menu-button');

Ici, ma variable menuButton contiendra un élément, le premier à répondre à la requête '#menu-button'.
Une fois cette étape réussit, vous allez pouvoir ajouter de l’interaction et plus.

interagir

Dans mon exemple final, je veux une action quand on clique sur menuButton.

menuButton.addEventListener('click',function(){
// une action à faire
});

On demande au navigateur d’ajouter un écouteur sur le bouton, en d’autres termes celui-ci surveille le bouton. Cet écouteur surveillera le ‘click’ de la souris et/ou son équivalent sur tactile pour y attacher une fonction (ici elle est vide).

Attention au ((){});, en cas d’erreur, le script sera bloqué, mais la console vous le dira.

la classe américaine

Pour aujourd’hui, on va voir trois actions possibles sur un élément et son attribut class :

  1. classList.add() pour ajouter une class ;
  2. classList.remove() pour supprimer une class ;
  3. classList.toggle() pour ajouter si elle n’existe pas ou supprimer si elle existe une class (toggle signifie basculer).

Pour utiliser classList, il suffit de mettre un point derrière l’élément ciblé.

menuButton.classList.toggle('close');
le nom de la class à ajouter ou supprimer est sans point devant !
Comme d’habitude, ouvrir l’inspecteur permet de voir si la modification s’est effectuée.

exemple sur un menu « burger »

Sur cet exemple, les quelques lignes de Javascript sont assez simples, néanmoins pour avoir un résultat probant, le CSS peut devenir complexe.

See the Pen javascript + classList by Benoît Wimart (@benoitwimart) on CodePen.0

Si vous êtes curieux, il est possible de faire ce genre d’interaction sans JavaScript, en CSS pure.