En este post Francisco López de webintenta nos muestra como crear un «alternador de estilos. Lo reproduzco textualmente.
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, por ejemplo, rel=»alternativo stylesheet»:
<link href=»css1.css» rel=»stylesheet» type=»text/css» title=»css1″/>
<link href=»css2.css» rel=»alternativo 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ólo 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>
Fuente | webintenta