José Carlos Web Designer | Freelancer

Tutorial: Mudando Folha de Estilo via JavaScript

Para quem procura uma opção de trocar a folha de estilo sem ter que recarregar a página, segue um tutorial com basicamente quatro passos:

No exemplo abaixo, utilizei três arquivos css: vermelho.css, azul.css e amarelo.css.

1- Crie suas folhas de estilo separadamente e escolha uma para ser a padrão, no exemplo será o “vermelho.css”. Insira no cabeçalho:

<link href="vermelho.css" rel="stylesheet" type="text/css" media="screen" />
<link href="azul.css" rel="alternate stylesheet" type="text/css" media="screen" title="estilo_azul" />
<link href="amarelo.css" rel="alternate stylesheet" type="text/css" media="screen" title="estilo_amarelo" />

Note que os estilos alternativos possuem no “rel” também a propriedade “alternate”.

2- Insira o menu que será responsável pela troca, que poderá ficar da seguinte forma:

<ul>
   <li><a href="#" title="Mudar tema para Vermelho (Padrão)" onclick="setActiveStyleSheet('', 1);return false;">Mudar tema para Vermelho (Padrão)</a></li>
   <li><a href="#" title="Mudar tema para Azul" onclick="setActiveStyleSheet('estilo_azul', 1);return false;">Mudar tema para Azul</a></li>
   <li><a href="#" title="Mudar tema para Amarelo" onclick="setActiveStyleSheet('estilo_amarelo', 1);return false;">Mudar tema para Amarelo</a></li>
</ul>

3- Para finalizar crie um arquivo chamado scripts.js e insira a seguinte função:

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;
}
}
}

4- Por fim é só adicionar a tag script no cabeçalho do seu arquivo html.

<script src="scripts.js" type="text/javascript"></script>

Obs.: Este tutorial foi baseado em um site já existente.