Crear un style switcher o alternador de estilos

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»:

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

Descubre lo que el diseño puede hacer por ti