En un post anterior vimos como "Cambiar de clase CSS de un elemento con DOM". En este vamos a ir un poco más allá y crear un "style-switcher" o alternador de estilos. Lo primero que debemos tener es 2 o más estilos, cada uno de ellos con su propio titulo. Uno de ellos con rel="stylesheet", que será el que coja por defecto y los otros dos con rel="alternate stylesheet":
<link href="css1.css" rel="stylesheet" type="text/css" title="css1"/> <link href="css2.css" rel="alternate stylesheet" type="text/css" title="css2"/>
Posteriormente debemos tener una función Javascript que se encargue de cambiar de estilo, pasándole como parámetro el título del mismo:
function EstablecerCSS(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title)
a.disabled = false;
}
}
}
Y ahora tan sóllo queda llamar a la función en el HTML:
<div id="enlaces">
<a href="javascript:EstablecerCSS('css1');">Estilo 1</a>
<a href="javascript:EstablecerCSS('css2');">Estilo 2</a>
</div>
