Cambiar hojas de estilo

En algún caso puede interesarnos ver una misma página con distintas hojas de estilo. El navegador Mozilla permite hacer esto directamente, pero en otros navegadores como Explorer debemos acudir al uso de JavaScript

Varias hojas de estilo en Mozilla/Firefox

Basta con poner varios elementos link. La hoja de estilo por defecto debe tener un rel="stylesheet", mientras que las alternativas deben tener rel="alternate stylesheet". Para que sean seleccionables dentro del menú de Ver, hay que ponerles además un atributo title. Por ejemplo:

    <link rel="stylesheet" title="normal" href="normal.css" type="text/css" media="screen">
    <link rel="alternate stylesheet" title="claro" href="uno.css" type="text/css" media="screen">
    <link rel="alternate stylesheet" title="oscuro" href="dos.css" type="text/css" media="screen">

Varias hojas de estilo en Explorer (y otros)

Habrá que usar algo de código JavaScript. Cuando se vea dicho tema en la asignatura se comprenderá el funcionamiento del código, por el momento se puede simplemente copiar y pegar en la página:

Poner los mismos link que en el caso anterior, cuidando de que el que apunta a la hoja de estilo por defecto (rel="stylesheet") tenga un atributo id="hojaCSS". De este modo, nuestra página será compatible también con el menú Ver de Mozilla. En realidad para Explorer el único link necesario será el primero.

    <link rel="stylesheet" title="normal" href="normal.css" type="text/css" media="screen" id="hojaCSS">
    <link rel="alternate stylesheet" title="claro" href="uno.css" type="text/css" media="screen">
    <link rel="alternate stylesheet" title="oscuro" href="dos.css" type="text/css" media="screen">

Pegar el siguiente código en cualquier parte de la página (por ejemplo, dentro del <head>)

    <script language="JavaScript">
       function cambiaCSS(nombre) {
          document.getElementById("hojaCSS").setAttribute("href", nombre);
       }
    </script>

Pegar el siguiente código en la parte de la página donde deseamos que aparezcan los botones

	<form id="botones">
		<input type="button" onClick="cambiaCSS('uno.css')" value="claro"/>
		<input type="button" onClick="cambiaCSS('dos.css')" value="oscuro"/>
		<input type="button" onClick="cambiaCSS('nada.css')" value="ninguno"/>
	</form>

Habrá que sustituir los nombres de los ficheros ('uno.css','dos.css',...) por los nuestros