Propiedad style

Curso de Javascript Online. Desde cero.

11.  
14.  
19.  
26.  

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.

Propiedad style 1

2. Ejercicio: cambiar color body

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

Para ello, añadiremos el listener change al combo desplegable.

Propiedad style 2

3. Ejercicio Lightbox

Usaremos los siguientes estilos:

#lightboxContainer {
  display: none;
}

#overlay {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

#lightbox {
  margin: 100px auto 0 auto;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  overflow: auto;
  position: relative;
  z-index: 9999;
}

Los siguientes códigos de Javascript:

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

Y el siguiente código HTML:

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

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

4. Ejercicio: Slider

Para resolver este ejercicio tendremos una variable i cuyo valor se incrementará una unidad cada vez que hagamos click en el enlace. Multiplicaremos esta variable por 500 para obtener el margin-left que debemos aplicar a la capa verde. De esta forma, la capa verde se desplazará horizontalmente cada vez que hagamos click en el enlace.

Cuando i sea igual a 3, le asignaremos el valor 0, para que el slider vuelva a su posición inicial.

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

Pasos en la resolución:

1. Al pulsar en el enlace, la capa verde debe desplazarse 500px.

2. El paso anterior debe realizarse con una transición animada.

3. Al pulsar en el enlace, la capa verde debe desplzarse 500px multiplicados por el valor de una variable contadora.

4. Cuando el slider llegue al final, debe volver a empezar.

Propiedad style 5
Propiedad style 6
← Método innerHTML de Javascript
Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase →