Cambiar de CSS

gustavo.morales · #1 (**permalink**) 06/09/2007, 08:31

Saludos,

Estoy realizando una pagina y normalmente siempre tenia un o varios estilos asignados a la pagina, pero quisiera poder cambiar el estilo en ejecución es decir que le presione un boton y le pueda cambiar el archivo CSS.

Gracias

pzin · #2 (**permalink**) 06/09/2007, 08:33

Tendrás que usar algún lenguaje de lado servidor (PHP, ASP, RoR...) o incluso creo que con javascript se podía.

mbavio · #3 (**permalink**) 06/09/2007, 08:43

La biblia para hacer lo que quieres...

Invasion of the Body Switchers

Saludos.

JavierB · #4 (**permalink**) 06/09/2007, 08:45

Hola gustavo.morales y Bonez

En efecto, con JavaScript es bastante fácil:

Kusor.net : Haciendo funcionar a las hojas de estilos alternativas - de ALA

Mensaje movido a JavaScript desde Css.

Saludos,

gustavo.morales · #5 (**permalink**) 06/09/2007, 17:26

Gracias mbavio yo tambien leo esa pagina es excelente y JavierB es un tutorial muy sencillo voy a probarlo.

gustavo.morales · #6 (**permalink**) 02/10/2007, 15:29

JavierB excelente enlace !!! el tutorial es excelente y funciona perfecto!!!

Panino5001 · #7 (**permalink**) 02/10/2007, 20:27

No es más sencillo esto?

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script> 
function loadCss(css) { 
    if(document.getElementById('estilos')) 
        document.getElementsByTagName('head')[0].removeChild(document.getElementById('estilos')); 
      var x = document.createElement("link"); 
    x.rel="stylesheet"; 
    x.href=css; 
    x.id="estilos"; 
      document.getElementsByTagName('head')[0].appendChild(x);     
} 
window.onload=function(){loadCss('estilos_1.css');}     
</script> 
 
</head> 
 
<body> 
<div id="navcontainer"> 
<ul id="navlist"> 
<li id="active"><a href="#" id="current">Item one</a></li> 
<li><a href="#">Item two</a></li> 
<li><a href="#">Item three</a></li> 
<li><a href="#">Item four</a></li> 
<li><a href="#">Item five</a></li> 
</ul> 
</div><br /> 
  <div id="submenu" align="center"><a href="javascript:loadCss('estilos_2.css')">estilo 2</a> <span>|</span> <a href="javascript:loadCss('estilos_1.css')">estilo 1 </a></div> 
</body> 
</html>

Belzebu · #8 (**permalink**) 22/10/2007, 13:00

Buenas, he probado el codigo puesto por Panino5001 y la verdad es que no me funciona, he probado este mismo codigo metiendo dos css llamados (hoja1.css y hoja2.css), he canviado las llamadas de la funciones respectivamente a loadCss('hoja1.css')" y loadCss('hoja2.css')" pero nada no funciona.

Como indico las hojas estan el misma carpeta que el archivo html con el codigo de Panino, si alguien me puede decir si tengo que tocar algo mas, se lo agradeceria.

Gracias por adelantado.

Panino5001 · #9 (**permalink**) 22/10/2007, 13:31

Acá te dejo un ejemplo funcionando:
http://www.disegnocentell.com.ar/new/ejemplos/lista.php

Belzebu · #10 (**permalink**) 22/10/2007, 13:43

Muchas gracias he mirado la web ke me has linkeado y ya me funciona todo, pero me gustaría hacer una pregunta que tendria que cambiar si quisiera cambiar los css a otra carpeta llamada css (por eso de estar un poco mas ordenado)

Gracias y perdon si soy un poco pesado.

Panino5001 · #11 (**permalink**) 22/10/2007, 13:50

Todo bien, no te preocupes. Simplemente, en el parámetro que usa la función incluís el directorio (puede ser la ruta absoluta -http://etc- o relativa -carpeta/archivo.css-)