Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Añadir clase

obj.classList.add('nombreClase');

Cambiar clase

obj.classList.toggle('nombreClase');

Eliminar clase

obj.classList.remove('nombreClase');

Evaluar si tiene una clase

if (obj.classList.contains('thatClass')) {
    // do some stuff
}

Ejercicios

Ejercicio – animate.css Copy

Usando addClass, hacer que al pulsar un botón el cuadrado rojo que hay debajo coja los estilos necesarios y suministrados por la librería animate.css para que se produzca la animación correspondiente

Para que funcione, habrá que añadir el class animate__animated y el class correspondiente a la animación que queremos emplear precedido de la palabra animate__ (animate__bounce) y que podemos consultar en animate.css.

const eliminaClases = _ => {
	const obj = document.querySelector("#rojo");
	obj.classList.remove('animate__animated','animate__bounce'); 
}
setTimeout(eliminaClases, 2000);

obj.addEventListener('animationend', () => {
	obj.classList.remove('animate__animated','animate__bounce');
});

Para hacer este ejercicio seguiremos las siguientes fases:

1. Colocar el código HTML para visualizar un botón y un cuadrado rojo.

2. Hacer que cuando pulsemos sobre el botón se muestre un mensaje de alerta.

3. En lugar de mostrar un mensaje de alerta, añadiremos al cuadrado rojo las clases encesarias para que este se anime.

4. Eliminar las clases necesarias para que al volver a pulsar sobre el cuadrado rojo se detone de nuevo la animación.

Ejercicio menú hamburguer Copy

Ejercicio menú hamburguer pulsando en fondo

Hacer que el panel desplegado se oculte cuando pulsemos fuera de él.

window.addEventListener('click', (e) => { 
   if (!panel.contains(e.target)){
      panel.classList.remove('active');
   }
});

Ejercicio precarga Copy

Mostrar un icono durante la precarga de la página.

Utilizaremos el siguiente class para hacer la capa container invisible durante el periodo de precarga:

.container.invisible{
	opacity: 0;
	height: 0;
	overflow: hidden;
}