[Resolvido] Como usar mais de um stylesheet no site?

[d3rson 0]

E ae pessoal...

 

Seguinte.. Estou desenvolvendo um site e nele terá uma opção onde o usuário irá trocar as cores. Até ai tudo certo. Já fiz a implementação dessa funcionalidade por jQuery e tals. Porém pra não precisar ficar alterando sempre os 2 arquivos .css fiz um terceiro onde está todo o CSS base do site, deixando os outros 2 apenas com as mudanças de cores/imagens.

 

O que eu quero saber é como faço agora, nessa troca de CSS, como charmar o CSS base + o css da cor que ele escolheu. Alguma dica?

 

meu código de troca:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.cookie.js"></script>
   <script type="text/javascript">
    if($.cookie("css")) {
        $("link").attr("href",$.cookie("css"));
     }
$(document).ready(function(){  
        $("#troca_1").click(function() {
           $(this).parent().find("#painel_1").slideDown('fast').show(); 

       $(this).hover(function() {
       }, function(){  
           $(this).parent().find("#painel_1").slideUp('slow'); 
       });
       })
	 $("#painel_1 li a").click(function() { 
		$("link").attr("href",$(this).attr('rel'));
		$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
     });
   });
   </script>

 

agora onde eu escolho os CSS:

 

<div id="painel_1" style="display: none">
    <p>A Escolha é Sua!</p>
<ul>
<li class="vermelho"><a href="#" rel="vermelho.css">VERMELHO</a></li> 
<li class="azul"><a href="#" rel="azul.css">AZUL</a></li> 
</ul>
</div>

[William Bruno 1501]

deixa o base por default, colocando na marcação html mesmo... com a tag <link /> e tal

 

em vez de fazer isso:

$("link")

crie o elemento e insira na marcação(com javascript)

[d3rson 0]

deixa o base por default, colocando na marcação html mesmo... com a tag <link /> e tal

 

em vez de fazer isso:

$("link")

crie o elemento e insira na marcação(com javascript)

 

não entendi?. pode me dar um exemplo??

[William Bruno 1501]

var css = document.createElement('link');.. e dai você configura os atributos dessa nova tag <link />

[d3rson 0]

Consegui resolver. Pode marcar como resolvido o tópico. Abaixo segue a resolução:

 

<link rel="stylesheet" type="text/css" href="styles.css" title="styles1" media="all" />
<link id="faccao" rel="stylesheet" type="text/css" href="vermelho.css" title="" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.cookie.js"></script>
   <script type="text/javascript">
           if($.cookie("css")) {
        $("link#faccao").attr("href",$.cookie("css"));
     }
       $(document).ready(function(){  
               $("#troca_1").click(function() {
           $(this).parent().find("#painel_1").slideDown('fast').show(); 

       $(this).hover(function() {
       }, function(){  
           $(this).parent().find("#painel_1").slideUp('slow'); 
       });
       })
                $("#painel_1 li a").click(function() { 
                       $("link#faccao").attr("href",$(this).attr('rel'));
                       $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
     });
   });
   </script>>

 

como podem perceber, onde eu chamo o stylesheet vermelho.css coloquei uma ID no

<link />

e jo jQuery na ação de clique para troca de CSS eu informo a ID do

<link />

q eu quero substituir!