[Resolvido] Alternar duas folha de estilo com apenas um link
Pessoal, estou desenvolvendo um site adotando os principios de acessibilidade, criei duas folhas de estilo, a normal e uma em alto contraste, faço a alternancia das duas normalmente e uso inclusive cache para manter a escolha do usuario, porem tenho que usar duas ancoras para isso, uma pra ir e outra pra voltar :lol:
Queria fazer como ta no site da celepar: http://www.celepar.pr.gov.br/
Notem que na barra de acessibilidade deles so tem um link "contraste", que alterna entre as duas folhas de estilo, alguem sabe como posso fazer isso? Usar somente uma ancora para alternar entre as duas folhas de estilo? Obrigado.
Abaixo o código dos links para alternar entre as folhas de estilo:
<a href="#" onclick="setActiveStyleSheet('contraste'); return false;" >Contraste</a>
<a href="#" onclick="setActiveStyleSheet('default'); return false;" >Normal</a>
O javascript que faz isso funcionar:
<script type="text/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;
}
}
}
</script>
Os Links das minhas folhas de estilo:
<link rel="stylesheet" href="css/style.css" type="text/css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="css/contraste.css" title="contraste" />
Funciona perfeitamente, o que quero é eliminar o segundo link, entendem, fazer com que ao clicar em "contraste" ele mude, e clicando de novo ele volte ao normal.
Desde já obrigado.
Discussão (4)
Carregando comentários...