[Resolvido] Trocando de CSS com Javascript

[Daniel_Martins 0]

Alguns dias atrás fiz um tópico para mudança de BG e uma div com Javascript

 

>> Tópico <<

 

Eu consegue o que eu queria utilizando CSS's diferentes e um JavaScript para trocar de css.

 

JavaScript

 

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

 

HTML

 

<!-- Folhas de estilo -->
<link rel='stylesheet' type=text/css href=Cinza.css >
<link rel='alternate stylesheet' type=text/css href=Azul.css title=estilo_azul>
<link rel='alternate stylesheet' type=text/css href=Verde.css title=estilo_verde>
<link rel='alternate stylesheet' type=text/css href=Laranja.css title=estilo_laranja> 
<!-- Fim das folhas de estilo -->
<script type=text/javascript src=Home.js></script></head>

<!-- Inicio do menu -->

<div id=linksbarramenu class=barramenu>
	<ul id=imagens>
		<li><a href=http://pedreira.org><img src=Imagens/logo.jpg height=24	width=40></a></li>     
	</ul>
	<div class=divisao></div>
		<ul id=linkbarramenu>
			<li>|</li>
			<li><a href=home.html>  Home   </a></li>
			<li>|</li>
			<li><a href=cadastro.html>   Cadastre-se   </a></li>
			<li>|</li>
			<li><a href=Login.html>   Login   </a></li>
			<li>|</li>
			<li><a href=FaleConosco.html>   Fale Conosco   </a></li>
			<li>|</li>
		</ul>
</div>
<!-- Fim do Menu -->
<br><br>
<div id=Escolha>Escolha a cor do site: |<a href='#' id='Link_Azul' onclick="setActiveStyleSheet('estilo_azul', 1);return false;"> Azul </a>| 
<a href='#' id=Link_Verde onclick="setActiveStyleSheet('estilo_verde', 1);return false;"> Verde </a>| 
<a href='#' id=Link_Laranja onclick="setActiveStyleSheet('estilo_laranja', 1);return false;"> Laranja 
</a>|<a href='#' id=Link_Cinza onclick="setActiveStyleSheet('', 1);return false;"> Cinza </a>|</div>

 

Isso funciona enquanto estou na página 'Home.html', ao clicar, por exemplo, em 'Azul' o site muda para a folha de estilo 'Azul.css'. Mas, ao clicar por exemplo, em 'FaleConosco.html' ele volta para o CSS padrão (cinza). O que eu quero é que ao mudar o site para a cor azul e mudar de página ele não volte para o css padrão.

 

Como faço?

 

 

Abraços.

[Henrique Barcelos 290]

É possível utilizar cookies para armazenar o estilo atual.

Entretanto, haverá um delay entre o carregamento da página e o carregamento do estilo correto. Se quiser eliminá-lo, precisará fazer isso com uma linguagem server-side, como PHP, ASP.NET ou Java.

 

Se o método com cookies for o suficiente pra você, basta pesquisar por 'Cookies Javascript' e tentar fazer.

A lógica é:

• Toda vez que o usuário escolher um tema, você salva o cookie com o nome do tema
• Quando a página carregar (onload), você lê do cookie o nome do tema e o seta.

[Daniel_Martins 0]

Vou tentar isso. Muito obrigado ^^

 

Abraços.

[Henrique Barcelos 290]

Para a solução com cookies, você pode se basear neste artigo:

:seta: http://henriquebarcelos.in/blog/2012/08/17/manipulando-cookies-com-javascript/

[Daniel_Martins 0]

Isso é EXATAMENTE o que eu queria, cara ^^

 

Muito obrigado mesmo :D