L'API .classList () - Astuces CSS | Extraits de code 2025

En supposant que vous ayez un élément dans le DOM:

Obtenez une référence à cet élément DOM:

const el = document.querySelector("#el");

Ensuite, vous pouvez manipuler les classes sur cet élément avec la classListméthode.

// Add a class el.classList.add("open"); // Add many classes el.classList.add("this", "little", "piggy"); let classes = ("is-message", "is-warning"); el.classList.add(… classes); // Remove a class el.classList.remove("open"); // Remove multiple classes el.classList.remove("this", "little", "piggy"); // Loop over each class el.classList; // DOMTokenList (pretty much an array) el.classList.forEach(className => ( // don't use "class" as that's a reserved word console.log(className); )); for (let className of $0.classList) ( console.log(className); ) el.classList.length; // integer of how many classes there are // Replace a class (replaces first with second) el.classList.replace("is-big", "is-small"); // Toggle a class (if it's there, remove it, if it's not there, add it) el.classList.toggle("open"); // Remove the class el.classList.toggle("open", false); // Add the class el.classList.toggle("open", true); // Add the class with logic el.classList.toggle("raining", weather === "raining"); // Check if element has class (returns true or false) el.classList.contains("open"); // Look at individual classes el.classList.item(0); // hot el.classList.item(1); // dog el.classList.item(2); // null el.classList(1); // dog

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.