¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Añade y quita clases CSS con JavaScript con classList

En los proyectos en los que trabajo para Google rara vez nos dejan usar jQuery y, por regla general hay que usar Google Closure. Reconozco que yo era de los que abusaba de jQuery y lo incluía sin más pero hace tiempo que eso cambió y el mundo sin jQuery no es demasiado malo.

Añadir y eliminar clases es una de las tareas más comunes que llevamos a cabo al trabajar con JavaScript y el DOM. ¿Queremos mostrar un modal? Añadimos clases a un puñado de elementos y el modal aparece.

Veamos primero cómo llevamos a cabo esta sencilla tarea con jQuery:

// Añade una clase
$('body').addClass('modal-abierto');
// Quita una clase
$('body').removeClass('modal-abierto');
// Añade/quita una clase
$('body').toggleClass('modal-abierto');

Ahora veamos cómo hacerlo con JavaScript.

Classlist

Los elementos del DOM tienen una propiedad llamada classList la cual es una matriz que contiene todas las clases que tiene el elemento. Además, tiene varios métodos adicionales:

  • add - Añade una clase.
  • remove - Elimina una clase.
  • toggle - Añade una clase si está presente y si no, la elimina.
  • contains - Revisa si la clase está presente en el elemento.

Lo cierto es que la especificación tiene más métodos pero raramente los usaremos.

Añadiendo y eliminando

Añadir y eliminar una clase no puede ser más sencillo. Simplemente pasa la clase que quieres añadir/eliminar como argumento al método:

document.body.classList.add('funcion13');  
console.log(document.body.classList); // ['funcion13']  
document.body.classList.remove('funcion13');  
console.log(document.body.classList); // []  

Si quieres abre la consola de Chrome y prueba estos comandos, verás como el elemento body recibe la clase correctamente.

¿Y si quiero añadir/eliminar varias?

¡Puedes pasar tantas clases como quieras!

document.body.classList.add('funcion13', 'mola');  
console.log(document.body.classList); // ['funcion13', 'mola']  
document.body.classList.remove('funcion13');  
console.log(document.body.classList); // ['mola']  

¿Contiene?

El método contains es un método que nos ayuda a saber si una clase está o no presente. Es el equivalente de jQuery a hasClass.

document.body.classList.add('funcion13', 'mola');  
console.log(document.body.classList); // ['funcion13', 'mola']  
console.log(document.body.classList.contains('funcion13')); // true  
console.log(document.body.classList.contains('mucho')); // false  

Alternando

Con el método toggle podemos alternar la presencia de una clase. Por ejemplo en un acordeón para desplegar/ocultar el contenido:

var acordeon = document.getElementById('acordeon');  
acordeon.classList.toggle('expandido'); // La añade  
acordeon.classList.toggle('expandido'); // La quita  

toggle tiene un segundo parámetro que fuerza la desaparición o aparición de la clase.

Si el segundo parámetro es true, la clase será añadida pero no eliminada (en caso de estar presente) y lo contrario ocurrirá si es false.

Soporte

El soporte para classList es bastante amplio y en IE funciona desde la versión 10. Existen formas de añadir soporte para classList hasta en IE7. Si necesitas ese tipo de soporte te recomiendo que eches un vistazo a eligrey/classList.js.

Resumen

El API de classList es bastante sencillo y nos permite hacer una de las tareas más comunes con elementos de nuestra página.

Como ves, ¡no todo en este mundo es jQuery!

Si has encontrado este artículo útil o tienes alguna duda, ¡no dudes en dejar un comentario! ¡Te lo agradeceré!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!