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.
No hay comentarios :
Publicar un comentario