La API .classList () - Trucos CSS | Fragmentos de código 2024

Suponiendo que tiene un elemento en el DOM:

Obtenga una referencia a ese elemento DOM:

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

Entonces puedes manipular las clases en ese elemento con el classListmétodo.

// 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

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.