En la clase de hoy, hemos aprendido a utilizar el lenguaje
JavaScript. Vamos a crear un botón que cambie el estilo de nuestra página web, la que creamos el otro día. Para realizar esta actividad vamos a crear un archivo
nuevo con extensión “.css”. Este nuevo archivo
tendrá un estilo diferente, en mi caso voy a modificar la cabecera y el
pie de página, para que se vean rápido los cambios.
Final1.css
#header{
Background-image:url( );
background-size: 100% 100%;
padding:25px;
}
En cambio mi Final2.css, tendrá otra imagen:
#header{
background-image:url( );
background-size: 100% 100%;
padding:25px;
}
Para que la página cambie de estilo, necesitamos crear un
botón. Como el que se muestra a continuación. Primero añadiremos un identificador
al link del estilo que vamos a usar, en mi caso css.
<link
rel="stylesheet" type ="text/css"
href="final1.css" id="css">
A continuación insertamos el script con la función. Como veréis
yo tengo dos funciones una que cambia mi estilo inicial al final y otra
viceversa.
<script
type="text/javascript" language="JavaScript">
function
cambio(){
document.getElementById("css").href=
"final2.css";
}
function
cambio2(){
document.getElementById("css").href=
"final1.css";
}
</script>
Por último, insertamos los botones donde queramos que
aparezca en mi caso en “head”.
<button type="button"
onclick="cambio()">Cambio de estilo!</button>
<button
type="button" onclick="cambio2()">Estilo
inicial</button>
ESTILO INICIAL
ESTILO FINAL
Para ver los cambios os invito a visitar mi página. WEB