Grasshopper Aprende a programar

 

JavaScript. Cambio dinámico en el estilo de una página web con distintos archivos .css

En la entrada anterior creamos un archivo con extensión .css y la enlazábamos al archivo index.html.
Ahora crearemos otro archivo nuevo con extensión .css y distinto nombre (yo le he llamado final3.css),  y crearemos dos botones en la página web para poder intercambiar los estilos en que se muestra nuestra página.

Modificaciones que hay que realizar en el archivo index.html:

1.- Hay que añadir un identificador al link del estilo que vamos a usar por defecto.
Le podéis poner el nombre que queráis, en mi caso le he puesto "estilo"

<link href="final.css" rel="stylesheet" type="text/css" id="estilo">

2.- En el head del index.html insertaremos un script con una función  con el nombre que queráis, en mi caso se llama "cambio"

<script type="text/javascript" language="JavaScript">
function cambio(archivo){
document.getElementById("estilo").href= archivo;
}
</script>

3.- Por último, en el body del index.html añadiremos un botón, cuya etiqueta le he puesto "Cambio de estilo! y que al hacer click, llamará a la función cambio,  pasándole como argumento el nombre del nuevo archivo css que hemos creado.

<button type="button" onclick="cambio('final3.css')">Cambio de estilo!</button>

Podéis crear otro botón para que al hacer click vuelva al estilo inicial (el que hemos puesto por defecto) y tantos botones como estilos deseéis probar.