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