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

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

Quisiera saber cuál es el método aconsejado para añadir o quitar una clase CSS (class de CSS) de un elemento de la página.

Quiero hacerlo con Javascript, sin necesidad de ninguna librería. Sólo con Javascript.

El elemento ya está en la página y mediante Javascript quiero acceder a él para colocarle dinámicamente la clase, o quitarla cuando lo necesite.

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

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
40 1 3 2