Propiedad style

Cambio del estilo de un elemento:	
obj.style.color = '#ff0000';

Ejercicios: style

1. Ejercicio: cuestionario

Nota: un elemento “span” es una capa (div) alineada con el texto.

2. Ejercicio: cambiar color body

Cuando seleccionemos un valor en el combo desplegable, el color del body debe cambiar.

3. Ejercicio Lightbox

Usaremos los siguientes estilos:


#black_overlay{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,0.7);
}
/*La capa lightbox estará dentro de la capa black_overlay*/
#lightbox{
	margin: 100px auto 0 auto;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	overflow: auto;
}

Usaremos:
document.querySelector('#black_overlay').style.display="block"

Detectar cuando pulsamos fuera.

window.addEventListener('click', function(e){ 
	const lightbox = document.querySelector('#lightbox'); 
	const black_overlay = document.querySelector('#black_overlay');
	if (!lightbox.contains(e.target)){
		hide();
	}
});

Será necesario detener la propagación del evento o la capa se ocultará después de hacerse visible:

const show = e => {
	e.stopPropagation();
	document.querySelector('#black_overlay').style.display = 'block'
}

4. Ejercicio: Slider

Volver a: Javascript

Aviso Legal | Política de privacidad