Cambiar Hoja de Estilo CSS con Ajax

MLDGATO · #1 (**permalink**) 01/08/2012, 12:00

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<!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-2" />
<title>Untitled Document</title>
<link id="Estilos" type="text/css" rel="stylesheet" />
</head>
 
<body>
<h2>Clase PanelSQL</h2>
<div id="menu">
  <ul>
    <li><a href="#" onclick="cambio(1)">1</a></li>
    <li><a href="#" onclick="cambio(2)">2</a></li>
    <li><a href="#" onclick="cambio(3)">3</a></li>
    <li><a href="#" onclick="cambio(4)">4</a></li>
    <li><a href="#" onclick="cambio(5)">5</a></li>
    <li><a href="#" onclick="cambio(6)">6</a></li>
    <li><a href="#" onclick="cambio(7)">7</a></li>
    <li><a href="#" onclick="cambio(8)">8</a></li>
  </ul>
</div>
</body>
</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 originalfunction cambio(valor){
        var miestilo;
        if (window.XMLHttpRequest){
            miestilo = new XMLHttpRequest();
        }else{
            miestilo = new ActiveXObject("Microsoft.XMLHTTP");
        }
        miestilo.onreadystatechange=function(){
            if (miestilo.readyState==4 && miestilo.status==200){
                document.getElementById("Estilos").href=miestilo.responseText;
            }
        }
        miestilo.open("GET","cambios.php?enviarnumero="+valor,true);
        miestilo.send();
    }

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$numeroestilo = $_GET['enviarnumero'];
    
    if($numeroestilo==1){
        echo "styles/shCoreDefault.css";
    }elseif($numeroestilo==2){
        echo "styles/shCoreDjango.css";
    }elseif($numeroestilo==3){
        echo "styles/shCoreEclipse.css";
    }elseif($numeroestilo==4){
        echo "styles/shCoreEmacs.css";
    }elseif($numeroestilo==5){
        echo "styles/shCoreFadeToGrey.css";
    }elseif($numeroestilo==6){
        echo "styles/shCoreMDUltra.css";
    }elseif($numeroestilo==7){
        echo "styles/shCoreMidnight.css";
    }elseif($numeroestilo==8){
        echo "styles/shCoreRDark.css";
    }

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<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;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-2&quot; /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;">

Muchas gracias por su ayuda

IXtremeLT · #2 (**permalink**) 01/08/2012, 22:03

Hola, no veo necesario el uso de AJAX, puedes hacerlo directamente.

Solo modifica la función cambio(), podría ser así:

Código Javascript:

Ver originalfunction cambio(valor){
        var obj_estilo = document.getElementById('Estilos');
        var hojas = ['styles/shCoreDefault.css', 'styles/shCoreDjango.css'];
        obj_estilo.href = hojas[valor-1];
    }

Saludos!