Prueba este método:
1.- en el <head> de tu documento, has referencia a dos o mas archivos CSS externos, que son los que contendrán los distintos formatos:
Código:
<link rel="stylesheet" type="text/css" href="estilo1.css">
<link rel="stylesheet" type="text/css" href="estilo2.css">
<link rel="stylesheet" type="text/css" href="estilo3.css">
<link rel="stylesheet" type="text/css" href="estilo4.css">
<link rel="stylesheet" type="text/css" href="estilo1.css">
Nota que el archivo "estilo1.css" se pone al principio y al final. Esto es porque el HTML leerá por
default la última referencia colocada, y en este caso deseamos que sea el estilo 1 el que aparezca al cargar la página. Seguimos.
2.- Ingresa el siguiente javascript
:
Código:
<script language="JavaScript" type="text/javascript">
<!--
var elegir_hoja=0;
function cambia_estilo(elegir_hoja){
elegir_hoja=elegir_hoja-1;
if(document.styleSheets){
var a = document.styleSheets.length;
for(var i=0;i<a;i++){
if(i!=elegir_hoja){
document.styleSheets[i].disabled=true;
} else{
document.styleSheets[i].disabled=false;
}
}
}
}
//-->
</script>
Este javascript crea una función que será ejecutada al hacer click en ciertos vínculos de nuestra página. En palabras muy simples, lo que hace es buscar cuántas hojas de estilo se han ingresado, compara cierto valor numérico y con base en el resultado, carga el CSS correspondiente a dicho número.
3.- Coloca los links que se encargarán de cambiar el CSS:
Código:
<a href="#" onClick="cambia_estilo(1)">Hoja CSS 1</a><br>
<a href="#" onClick="cambia_estilo(2)">Hoja CSS 2</a><br>
<a href="#" onClick="cambia_estilo(3)">Hoja CSS 3</a><br>
<a href="#" onClick="cambia_estilo(4)">Hoja CSS 4</a><br>
Listo! Esperemos que no te de problema alguno. Saludos!