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.

Curso de Javascript Online. Desde cero.

11.  
14.  
19.  
26.  
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

Usando addClass, hacer que al pulsar un botón este 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.

Si queremos que pasado un tiempo se elimine el class, usaremos la función timeOut

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

Si queremos que el class se elimine cuando la animación ha concluído, usaremos:

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

Ejercicio menú hamburguer

Ejercicio menú hamburguer pulsando en fondo

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

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

Ejercicio precarga

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;
}
← Propiedad style
Función callback en Javascript →