cambio de css de una pagina

neomix · #1 (**permalink**) 19/07/2005, 08:53

hola gente

como puedo hacer para que cambie automaticamente el css de una pagina, atravez de un link en el html, si se puede hacer espero su ayuda.

gracias.

culantrax · #2 (**permalink**) 19/07/2005, 09:44

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!

neomix · #3 (**permalink**) 19/07/2005, 13:14

gracias culantrax, una pregunta mas ese javascript lo debo poner en el head o en el body.

asinox · #4 (**permalink**) 19/07/2005, 16:30

Donde tu quieras.... e igual hacer pruebas no te cuesta mucho :)

neomix · #5 (**permalink**) 20/07/2005, 09:32

culantrax ha funcionado a la perfeccion, muchas gracias por la ayuda.

asinox, aparte de tu comentario podrias aportar algo mas.

jorgedx · #6 (**permalink**) 20/07/2005, 10:25

jajaja flojo

asinox · #7 (**permalink**) 20/07/2005, 10:56

ejjeej el comentario es suficiente ...ahora dime donde lo pusiste? ejeje

neomix · #8 (**permalink**) 20/07/2005, 12:29

Me referia a si puedes ampliar en algo lo expuesto por culantrax

asinox · #9 (**permalink**) 20/07/2005, 12:35

Pues no creo man, si te funciona perfecto, yo utilizo un styleswicht, pero este igual funciona si ya lo probaste....hasta yo lo probare mas tarde.

Saludos

neomix · #10 (**permalink**) 21/07/2005, 17:16

me puedes comentar sobre el styleswicht

gracias

asinox · #11 (**permalink**) 22/07/2005, 06:04

Pues es un js que trabaja con el DOM de la navegador, aqui tienes mas informacion :)

Estilos alternativos