Para trabajar más cómodamente, existe un sistema muy interesante para trabajar con clases: la propiedad u objeto .classList. Se trata de un objeto especial que contiene una serie de ayudantes que permiten trabajar con las clases de forma más intuitiva y lógica.
Si accedemos a la propiedad u objeto .classList, nos devolverá un
| Método | Descripción |
|---|---|
| Obtener información | |
.classList | Devuelve la lista de clases del elemento HTML. |
.classList.length | Devuelve el número de clases del elemento HTML. |
.classList.item(n) | Devuelve la clase número n del elemento HTML. |
.classList.contains(clase) | Indica si la clase existe en el elemento HTML. |
| Métodos o acciones | |
.classList.add(c1, c2, ...) | Añade las clases c1, c2... al elemento HTML. |
.classList.remove(c1, c2, ...) | Elimina las clases c1, c2... del elemento HTML. |
.classList.toggle(clase) | Si la clase no existe, la añade. Si no, la elimina. |
.classList.toggle(clase, expr) | Si expr es true, añade la clase. Si es false, la elimina. |
.classList.replace(old, new) | Reemplaza la clase old por la clase new. |
Veamos un ejemplo de uso de cada método de ayuda. Supongamos que tenemos el siguiente elemento HTML en nuestro documento. Vamos a acceder a el y a utilizar el objeto .classList con dicho elemento:
<div id="page" class="info data dark" data-number="5"></div>
Observa que dicho elemento HTML tiene:
- Un atributo
id - Tres clases CSS:
info,dataydark - Un metadato HTML
data-number(también es un atributo)
Acceder a clases CSS
Al margen de acceder a la lista de clases mediante .classList y al número de clases del elemento con .classList.length, es posible acceder a la propiedad .classList.values para obtener un .className:
const element = document.querySelector("#page");
// ¿Qué clases tiene?
element.classList; // ["info", "data", "dark"] (DOMTokenList)
element.classList.value; // "info data dark" (String)
element.classList.length; // 3
// Convertirlas a array
Array.from(element.classList) // ["info", "data", "dark"] (Array)
[...element.classList]; // ["info", "data", "dark"] (Array)
// Consultarlas
element.classList.item(0); // "info"
element.classList.item(1); // "data"
element.classList.item(3); // null
El objeto .classList aunque parece que devuelve un Array.from() o desestructuración con [...div.classList].
Por último, observa que disponemos del método .classList.item() que nos devuelve un
Añadir y eliminar clases CSS
Los métodos .classList.add() y .classList.remove() permiten indicar una o múltiples clases CSS a añadir o eliminar. Observa el siguiente código donde se ilustra un ejemplo:
const element = document.querySelector("#page");
element.classList.add("uno", "dos");
element.classList; // ["info", "data", "dark", "uno", "dos"]
element.classList.remove("uno", "dos");
element.classList; // ["info", "data", "dark"]
Al utilizar los métodos .add() o .remove(), en el caso de que se añada una clase CSS que ya existía previamente, o que se elimine una clase CSS que no existía, simplemente no ocurrirá nada.
Comprobar si existen clases CSS
Con el método .classList.contains() podemos comprobar si existe una clase en un elemento HTML, ya que nos devuelve un
const element = document.querySelector("#page");
element.classList; // ["info", "data", "dark"]
element.classList.contains("info"); // Devuelve `true` (existe esa clase)
element.classList.contains("warning"); // Devuelve `false` (no existe esa clase)
Esto puede resultar interesante en algunas situaciones, donde queremos averiguar mediante Javascript si existe una clase.
Conmutar o alternar clases CSS
Otro ayudante muy interesante es el del método .classList.toggle(), que lo que hace es añadir o eliminar la clase CSS dependiendo de si ya existía previamente. Es decir, añade la clase si no existía previamente o elimina la clase si existía previamente:
const element = document.querySelector("#page");
element.classList; // ["info", "data", "dark"]
element.classList.toggle("info"); // Como "info" existe, lo elimina. Devuelve "false"
element.classList; // ["data", "dark"]
element.classList.toggle("info"); // Como "info" no existe, lo añade. Devuelve "true"
element.classList; // ["info", "data", "dark"]
Observa que .toggle() devuelve un true o false dependiendo de si, tras la operación, la clase sigue existiendo o no. Ten en cuenta que en .toggle(), al contrario que .add() o .remove(), sólo se puede indicar una clase CSS por parámetro.
Reemplazar una clase CSS
Por último, tenemos un método .classList.replace() que nos permite reemplazar la primera clase indicada por parámetro, por la segunda. Veamos este método en acción:
const element = document.querySelector("#page");
element.classList; // ["info", "data", "dark"]
element.classList.replace("dark", "light"); // Devuelve `true` (se hizo el cambio)
element.classList.replace("warning", "error"); // Devuelve `false` (no existe warning)
Con todos estos métodos de ayuda, nos resultará mucho más sencillo manipular clases CSS desde Javascript en nuestro código.
