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
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 hacer este ejercicio seguiremos los siguientes pasos:
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.
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.
4. Eliminar las clases necesarias para que al volver a pulsar sobre el cuadrado rojo se detone de nuevo la animación.
Para eliminar las clases, la mejor solución sería detectar con un listener cuando termina la animación y en ese momento eliminar las clases.
obj.addEventListener('animationend', () => {
obj.classList.remove('animate__animated','animate__bounce');
});Otra solución sería eliminar las clases pasado un tiempo (aunque esta solución me gusta menos)
const eliminaClases = () => {
const obj = document.querySelector("#rojo");
obj.classList.remove('animate__animated','animate__bounce');
}
setTimeout(eliminaClases, 2000);Ejercicio menú hamburguer
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');
}
});El código anterior significa:
Cuando hacemos click en la pantalla comprobamos si el panel no contiene el elemento sobre el que hemos hecho click(e.target). Si no lo contiene, eliminamos el class active.
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;
}Para detectar cuando se ha cargado todo el contenido de la página, usaremos:
window.addEventListener('load', () => {
...
})