La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Front-endSupongamos que tienes un elemento en tu página como este:

<div class="rojo">

que quieres localizar y cambiar la clase que tiene aplicada para que pase a ser “verde”, o sea, equivalente a esto:

<div class="verde">

Nota: Dejemos de lado el hecho de que el nombre de la clase no es el más apropiado pues no es reutilizable y está atado al aspecto físico concreto. Este no es un artículo de buenas prácticas de CSS.

Para realizar ese cambio de clase, la gente que utiliza jQuery está muy acostumbrada a escribir código como este:

$('.rojo').removeClass("rojo").addClass("verde");

Este fragmento es muy sencillo y lo que hace es, primero localizar todos los elementos que tienen aplicada la clase “rojo”, a éstos se la retira con removeClass y luego le añade la clase “verde” usando el método addClass de jQuery.

La verdad es que es muy fácil, pero ¿realmente merece la pena añadir una dependencia a jQuery (y todo su peso y procesamiento) a nuestra página para hacer algo tan sencillo?

La respuesta es que, desde luego solo para este tipo de cosas, no: no merece la pena.

Los navegadores actuales son capaces de hacer exactamente lo mismo con JavaScript puro sin necesidad de recurrir a bibliotecas externas, y además es casi igual de sencillo conseguirlo.

Vamos a ver cómo podemos lograr lo mismo sin jQuery, solo con lo que nos ofrece el navegador…

SIGUE LEYENDO para aprender:

  • Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
  • Cómo quitar clases
  • Cómo añadir clases
  • Cómo alternar clases
  • Cómo comprobar si un elemento tiene aplicada o no una determinada clase
  • Cómo dar soporte a navegadores muy antiguos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *