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:


#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;
	z-index: 5;
	position: relative;
}

Los siguientes códigos de Javascript:

document.querySelector('#overlay').style.display = 'block';
document.querySelector('#lightbox').style.display = 'block';

Y el siguiente código HTML:

<div id="overlay"></div>

<div id="lightbox">This is the lightbox content.
     <a href="#" id="ocultar">Close</a>
</div>

4. Ejercicio: Slider

Para poder hacer el slider, utilizaremos la siguiente distribución de capas.

Propiedad style 1
← Método innerHTML de Javascript
Efecto parallax →

Aviso Legal | Política de privacidad