Cómo añadir y quitar una clase CSS de un elemento mediante Javascript

En Javascript, para cada elemento del DOM existe un mecanismo muy útil y sencillo para manipular los nombres de clases CSS que pueda tener ese elemento en un momento dado.

La propiedad en cuestión se llama "classList" y cuando la usas devuelve una colección de las clases que tiene un elemento. Esa colección tiene los métodos "add" y "remove", que te permiten añadir o quitar clases determinadas.

Es importante manejar las clases del elemento con la propiedad classList del DOM, porque hay que tener en cuenta que un elemento puede tener un número de clases determinado en cada momento. Si manipulas con Javascript directamente el atributo class de la etiqueta, corres el riesgo de quitar cualquier clase de CSS que exista en la actualidad. Por eso es que el método recomendado de manipular las clases es mediante classList.

El método de añadir clases CSS lo puedes invocar con cualquier número de clases separadas por parámetro. Aunque lo común es pasarle una única clase, puedes pasarle varias a la vez si lo necesitas.

document.getElementById('mi_elemento').classList.add('nueva_clase');

El método remove también permite eliminar cualquier número de clases que se deseen, pasando las cadenas de cada class de CSS, como parámetros individuales.

document.getElementById('mi_elemento').classList.remove('quitar_esta_clase', 'quitar_esta_clase_tambien');

Adicionalmente, tienes un método bastante útil llamado "toggle", que permite decir el nombre de una clase CSS y: a) si está, la quita b) si no está, la pone.

document.getElementById('mi_elemento').classList.toggle('poner_o_quitar_esta_clase');

En cuanto a compatibilidad, puedes usar estos métodos con total confianza en todos los browsers actuales, inclusive en Internet Explorer 11. Aunque en el caso de IE11 no soporta ni el método toggle, ni tampoco indicar varias clases de CSS como parámetros a la vez, tanto en add como en remove.

Alba

355 9 25 13

Me ha venido muy bien el método toggle para poner y quitar la clase. No soporto IE en mis últimos proyectos, así que no me importa que no sea perfectamente compatible con ese navegador.

Un pequeño código que coloca una clase y la quita en función de un evento que se captura en otro elemento de la página que hace de interruptor.

document.getElementById('js1').addEventListener('toggle', function(e) {
  if(e.detail.value) {
    document.querySelector('html').classList.add('dark');
  } else {
    document.querySelector('html').classList.remove('dark');
  }
});

La gracia aquí es que desde el objeto document accedemos al elemento <html>, la etiqueta raíz y le podemos o le quitamos una clase css llamada "dark".

Miguel Angel

3310 147 216 17

Genial! he usado este mismo código para añadir y quitar el class de css sobre los elementos y funciona perfecto.

Con este sencillo código javascript consigues que el class "hide" se ponga y se quite de un elemento con id "targetElement", al hacer click sobre el botón con id="toggleButton"

document.getElementById('toggleButton').addEventListener('click', function() {
    document.getElementById('targetElement').classList.toggle('hide');
})

No necesitas nada más. El único detalle es que este método no funcionaría en Internet Explorer 11, ya que el método classList.toggle() no lo soporta este navegador.

Santiago

571 18 45 21

Cómo añadir y quitar una clase CSS de un elemento mediante Javascript

Respuestas