Tema: Cambiar Hoja de Estilo CSS con Ajax
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/08/2012, 12:00
Avatar de MLDGATO
MLDGATO
 
Fecha de Ingreso: marzo-2011
Ubicación: Guatemala
Mensajes: 113
Antigüedad: 13 años, 11 meses
Puntos: 2
Pregunta Cambiar Hoja de Estilo CSS con Ajax
Saludos a todos las personas que pasan por este gran foro, hoy vengo con una gran duda quiero cambiar una hoja de estilo CSS que está vinculada en mi página, los códigos que tengo son los siguientes:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Untitled Document</title>
  6. <link id="Estilos" type="text/css" rel="stylesheet" />
  7. </head>
  8.  
  9. <body>
  10. <h2>Clase PanelSQL</h2>
  11. <div id="menu">
  12.   <ul>
  13.     <li><a href="#" onclick="cambio(1)">1</a></li>
  14.     <li><a href="#" onclick="cambio(2)">2</a></li>
  15.     <li><a href="#" onclick="cambio(3)">3</a></li>
  16.     <li><a href="#" onclick="cambio(4)">4</a></li>
  17.     <li><a href="#" onclick="cambio(5)">5</a></li>
  18.     <li><a href="#" onclick="cambio(6)">6</a></li>
  19.     <li><a href="#" onclick="cambio(7)">7</a></li>
  20.     <li><a href="#" onclick="cambio(8)">8</a></li>
  21.   </ul>
  22. </div>
  23. </body>
  24. </html>

si pueden observar en la línea 6 tengo la vinculación de la hoja de estilos pero le falta la propeidad "href" ya que dicha propiedad es la que voy a cambiar con ajax al momento que haga clic en cualquiera de los elementos que tengo en mi lista y cada elemento hace un llamado a la función "cambio" y en dicha función se envía un valor, este el el código javascript que tengo.

Código Javascript: 
Ver original
  1. function cambio(valor){
  2.         var miestilo;
  3.         if (window.XMLHttpRequest){
  4.             miestilo = new XMLHttpRequest();
  5.         }else{
  6.             miestilo = new ActiveXObject("Microsoft.XMLHTTP");
  7.         }
  8.         miestilo.onreadystatechange=function(){
  9.             if (miestilo.readyState==4 && miestilo.status==200){
  10.                 document.getElementById("Estilos").href=miestilo.responseText;
  11.             }
  12.         }
  13.         miestilo.open("GET","cambios.php?enviarnumero="+valor,true);
  14.         miestilo.send();
  15.     }

Por ultimo tengo el archivo php que es el que se encarga de hacer el cambio según el numero que reciba.

Código PHP: 
Ver original
  1. $numeroestilo = $_GET['enviarnumero'];
  2.     
  3.     if($numeroestilo==1){
  4.         echo "styles/shCoreDefault.css";
  5.     }elseif($numeroestilo==2){
  6.         echo "styles/shCoreDjango.css";
  7.     }elseif($numeroestilo==3){
  8.         echo "styles/shCoreEclipse.css";
  9.     }elseif($numeroestilo==4){
  10.         echo "styles/shCoreEmacs.css";
  11.     }elseif($numeroestilo==5){
  12.         echo "styles/shCoreFadeToGrey.css";
  13.     }elseif($numeroestilo==6){
  14.         echo "styles/shCoreMDUltra.css";
  15.     }elseif($numeroestilo==7){
  16.         echo "styles/shCoreMidnight.css";
  17.     }elseif($numeroestilo==8){
  18.         echo "styles/shCoreRDark.css";
  19.     }

Verificando el código en una vista de código de Dreamwaver vi que si se agrega la propiedad href en la etiqueta <link> pero no solo aparece el nombre sino que aparece todo esto:

Código HTML: 
Ver original
  1. <link id="Estilos" type="text/css" rel="stylesheet" href="styles/shCoreEmacs.css&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
  2. &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-2&quot; /&gt;
  5. &lt;title&gt;Untitled Document&lt;/title&gt;
  6. &lt;/head&gt;
  8. &lt;body&gt;
  9. &lt;/body&gt;
  10. &lt;/html&gt;">

Muchas gracias por su ayuda