Modificar las clases CSS de un elemento HTML desde JavaScript (classList)

    Por fin contamos con una forma nativa de modificar el atributo class de los nodos del DOM (Document Object Model) a los que accedemos por JavaScript. Antes de la existencia del classList, para cambiar desde JavaScript las reglas CSS que modifican a un elemento HTML había que utilizar su propiedad className e igualarla a un valor de tipo string.

// Obtenemos el nodo del DOM al cual queremos aplicar dos clases CSS
var nodo = document.getElementById("div");
// Igualamos su atributo className a un string que contiene el nombre
// de las clases CSS a aplicar separadas por espacios.
nodo.className = "clase1 clase2";

    Usamos el atributo con nombre className para modificar el atributo class porque la palabra class es una palabra reservada en JavaScript.
    ¿Qué pasaría si por ejemplo quisiéramos aplicar una nueva clase a todos los elementos que contengan la clase2 pero no contengan la clase1? Podríamos hacerlo buscando en el string con los métodos que nos ofrece JavaScript y posteriormente modificar de nuevo la propiedad añadiéndole la nueva clase. Son tareas bastante costosas, es por ello que ha aparecido classList.
    Utilizando los métodos del objeto classList de los nodos del DOM podemos modificar las clases CSS que posee dicho elemento. A continuación te mostraré los sencillos métodos que nos porporciona.

1. add

Añadimos una clase nueva al elemento del nodo. Si dicha clase no existe no pasa nada. El método no devuelve nada.
nodo.classList.add("nombreClase");

2. remove

Borramos una clase del elemento del nodo. Si dicha clase no existe no pasa absolutamente nada. El método no devuelve nada.
nodo.classList.remove("nombreClase");

3. toggle

"Togglea" una clase :D. Si la clase pasada como argumento existe en el atributo class se borra de él, si no existe, se añade. Devuelve true si existe y false si no.
nodo.classList.toggle("nombreClase");

4. contains

Comprueba si existe una clase determinada en ese elemento. Devuelve true si existe y false si no.
nodo.classList.contains("nombreClase");

5. length

Nos proporciona un número que nos indica cuantas clases CSS posee el nodo.
nodo.classList.length;

6. item

Nos permite visualizar una por una las clases que posee. Obtenemos un string con el nombre de la clase que ocupa esa posición. Si n > classList.length entonces null.
nodo.classList.item(n);

4 comentarios :

  1. ni un ejemplo ANIMALES!!

    ResponderEliminar
    Respuestas
    1. Es cierto, sería buena idea poner ejemplos que faciliten la comprensión. En lo de ANIMALES ya no estoy de acuerdo. Más animal eres tú que no sabes utilizar esas funciones leyendo una clara y concisa información de cada una de ellas.
      Un saludo!

      Eliminar
  2. ¿y que coño hago con eso? lo imprimo y lo escaneo o que hago?

    ResponderEliminar