Manipular clases CSS (classList)

En CSS es muy común utilizar múltiples clases CSS para asignar estilos relacionados dependiendo de lo que queramos. Para ello, basta hacer cosas como la que veremos a continuación:

<div class="element shine dark-theme"></div>
  • La clase element sería la clase general que representa el elemento, y que tiene estilos fijos.
  • La clase shine podría tener una animación CSS para aplicar un efecto de brillo.
  • La clase dark-theme podría tener los estilos de un elemento en un tema oscuro.

Todo esto se utiliza sin problema de forma estática, pero cuando comenzamos a programar en Javascript, buscamos una forma dinámica, práctica y cómoda de hacerlo desde Javascript, y es de lo que tratará este artículo.

La propiedad className

Javascript tiene a nuestra disposición una propiedad .className en todos los elementos HTML. Dicha propiedad contiene el valor del atributo HTML class, y puede tanto leerse como reemplazarse:

Propiedad Descripción
.className Acceso directo al valor del atributo HTML class. También se puede asignar.
.classList Objeto especial para manejar clases CSS. Contiene métodos y propiedades de ayuda.

La propiedad .className viene a ser la modalidad directa y rápida de utilizar el getter .getAttribute("class") y el setter .setAttribute("class", v). Veamos un ejemplo utilizando estas propiedades y métodos y su equivalencia:

const div = document.querySelector(".element");

// Obtener clases CSS
div.className;              // "element shine dark-theme"
div.getAttribute("class");  // "element shine dark-theme"

// Modificar clases CSS
div.className = "elemento brillo tema-oscuro";
div.setAttribute("class", "elemento brillo tema-oscuro");

Trabajar con .className tiene una limitación cuando trabajamos con múltiples clases CSS, y es que puedes querer realizar una manipulación sólo en una clase CSS concreta, dejando las demás intactas. En ese caso, modificar clases CSS mediante una asignación .className se vuelve poco práctico. Probablemente, la forma más interesante de manipular clases desde Javascript es mediante el objeto .classList.

El objeto classList

Para trabajar más cómodamente, existe un sistema muy interesante para trabajar con clases: el objeto classList. Se trata de un objeto especial (lista de clases) que contiene una serie de ayudantes que permiten trabajar con las clases de forma más intuitiva y lógica.

Si accedemos a .classList, nos devolverá un (lista) de clases CSS de dicho elemento. Pero además, incorpora una serie de métodos ayudantes que nos harán muy sencillo trabajar con clases CSS:

Método Descripción
.classList Devuelve la lista de clases del elemento HTML.
.classList.item(n) Devuelve la clase número n del elemento HTML.
.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.contains(clase) Indica si la clase existe en el 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 clase. Si no, la elimina.
.classList.replace(old, new) Reemplaza la clase old por la clase new.

OJO: Recuerda que el objeto .classList aunque parece que devuelve un no es un array, sino un elemento que actúa como un array, por lo que puede carecer de algunos métodos o propiedades concretos. Si quieres convertirlo a un array real, utiliza Array.from().

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, data y dark
  • Un metadato HTML data-number

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 div = document.querySelector("#page");

div.classList; // ["info", "data", "dark"]

div.classList.add("uno", "dos"); // No devuelve nada.
div.classList; // ["info", "data", "dark", "uno", "dos"]

div.classList.remove("uno", "dos"); // No devuelve nada.
div.classList; // ["info", "data", "dark"]

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.

Conmutar o alternar clases CSS

Un 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 div = document.querySelector("#page");

div.classList; // ["info", "data", "dark"]

div.classList.toggle("info"); // Como "info" existe, lo elimina. Devuelve "false"
div.classList; // ["data", "dark"]

div.classList.toggle("info"); // Como "info" no existe, lo añade. Devuelve "true"
div.classList; // ["info", "data", "dark"]

Observa que .toggle() devuelve un que será 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.

Otros métodos de clases CSS

Por otro lado, tenemos otros métodos menos utilizados, pero también muy interesantes:

  • El método .classList.item(n) nos devuelve la clase CSS ubicada en la posición n.
  • El método .classList.contains(name) nos devuelve si la clase CSS name existe o no.
  • El método .classList.replace(old, current) cambia la clase old por la clase current.

Veamos un ejemplo:

const div = document.querySelector("#page");

div.classList; // ["info", "data", "dark"]

div.classList.item(1); // 'data'
div.classList.contains("info"); // Devuelve `true` (existe la clase)
div.classList.replace("dark", "light"); // Devuelve `true` (se hizo el cambio)

Con todos estos métodos de ayuda, nos resultará mucho más sencillo manipular clases CSS desde Javascript en nuestro código.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.