Manipuler les classes avec classApi

Actualisé le 4 octobre 2016

De nombreuses fonctionnalités sont disponibles avec HTML5 ce qui permet notamment de se passer de librairies tierces. Un bon exemple est l’implémentation de classList, qui permet de manipuler les classes sur le DOM, vous pourrez ainsi vous passer de librairies comme jQuery pour ajouter, supprimer, tester une classe sur un élément du DOM.

Comment ajouter une classe avec classList

C’est très simple, utilisez votre sélecteur JS habituel et appelez simplement .classList, puis la méthode qui correspond, en l’occurrence add.

Comment supprimer une classe avec classList

Pour supprimer une classe c’est le même principe avec la méthode remove

Comment faire un toggle d’une classe avec classList

Pour switcher une classe sur un élément il existe la méthode toggle

Comment vérifier si une classe est affectée via classList

Pour vérifier si une classe est affectée sur un élément du DOM il existe la méthode contains

Comment compter le nombre de classes sur un élément du DOM via classList

Enfin pour compter le nombre de classes sur une div par exemple, la propriété length existe

Un petit exemple d’utilisation

See the Pen NRwJKA by meetjey (@meetjey) on CodePen.0

 

Merci à l’article de Ayo Isaiah.

Commentaires

Laisser un commentaire