fbpx

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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Por favor valore el contenido)
Cargando...

Hablemos

Si tiene cualquier pregunta somos todo oídos :-)

Enviando

Inicia Sesión con tu Usuario y Contraseña

¿Olvidó sus datos?