Cambiar hojas de estilo cada cierto tiempo

Oscar_Hidro · #1 (**permalink**) 22/12/2011, 11:24

Que tal foreros. Como lo dice el titulo, estoy en busca de alguna solucion a esta duda que me ha surgido. Hasta el momento solamente he encontrado solución pero haciendo referencia solamente al cambio de propiedades en la hoja de estilo, es decir, a una clase o a un elemento en concreto.

Otra solucion muy común que encuentro en la web, es referenciar a otras hojas de estilo a traves de algún link al css que queremos que nos muestre en la pantalla. Pero existe la posibilidad de que en vez de hacer un evento "clic", pueda generar un cambio de css despues de un tiempo que nosotros especifiquemos???

Si me pudieran orientaral respecto, se los agradeceria infinitamente.

marlanga · #2 (**permalink**) 22/12/2011, 14:21

Código HTML:

<html>
	<head>
		<title>Prueba</title>
		<link id="css1" href="estilo1.css" type="text/css" rel="stylesheet">
		<script>
			var indiceEstilo=0;
			var estilos=["estilo1.css","estilo2.css"];
			
			var tiempoMilisegundos=1000;
			
			function tiempo(){
				setInterval("inicio();",tiempoMilisegundos);
			}
			
			function inicio(){
				indiceEstilo=(indiceEstilo+1)%estilos.length;
				document.getElementById('css1').href=estilos[indiceEstilo];
			}
		</script>
	</head>

	<body onload="tiempo();">
		<div>HOLA</div>
	</body>
</html>

Archivo estilo1.css

Código:

body {  background-color:red; }
div { margin: 30px; width:100px; height:100px; background-color:blue; color:pink;}

Archivo estilo2.css

Código:

body {  background-color:green; }
div { margin: 30px; width:200px; height:200px; background-color:black; color:white;}

La he subido a mi carpeta de experimentos. Aquí se puede ver el ejemplo online.

Pablo Ayala · #3 (**permalink**) 25/12/2011, 23:45

Wooow marlanga eso si es ayudar!

Saludos!

Oscar_Hidro · #4 (**permalink**) 09/01/2012, 18:14

@Marlanga, estoy muy agradecido por tu aporte. Me ha servido a las mil maravillas. Te mando un saludo afectuoso.