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).
((){});
, 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 :
- classList.add() pour ajouter une class ;
- classList.remove() pour supprimer une class ;
- 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');
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.