Delicious LinkedIn Facebook Twitter RSS Feed

Crear un alternador de estilos

Lo primero que debemos tener es 2 o mas estilos, cada uno de ellos con su propio titulo. Uno de ellos con rel="stylesheet", que será el que coja por defecto y el otro 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 solo 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>

0 comments:

Post a Comment