Crear un style switcher o alternador de estilos

Escrito en Noviembre 4, 2006 | Categoria: web

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

  1. <link href="css1.css" rel="stylesheet" type="text/css" title="css1"/>
  2. <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:

  1. function EstablecerCSS(title) {
  2.       var i, a, main;
  3.       for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  4.             if(a.getAttribute("rel").indexOf("style") != -1 &&
  5.                   a.getAttribute("title")) {
  6.                   a.disabled = true;
  7.             if(a.getAttribute("title") == title)
  8.         a.disabled = false;
  9.             }
  10.       }
  11. }

Y ahora tan sólo queda llamar a la función en el HTML:

  1. <div id="enlaces">
  2. <a href="javascript:EstablecerCSS(’css1′);">Estilo 1</a>
  3. <a href="javascript:EstablecerCSS(’css2′);">Estilo 2</a>
  4. </div>

Ver ejemplo en funcionamiento »»

Fuente | webintenta

» Archivado en web

Comentario

Copyright © 2005 Yourcopyright. All Rights Reserved | Design: YGoY