Há uma forma de fazer isso verificando de o localStorage
existe ou não existe. Ao abrir a página, você verifica se ele existe, ou seja, já foi criado antes. Se existir você insere uma tag link
com a URL do CSS guardada nele, se não, você faz a mesma coisa com a URL do CSS normal.
Não sei como você fez o botão que alterna entre os CSS's, mas no exemplo abaixo eu já coloquei uma forma de manipular o CSS e o botão. No caso, o botão tem uma id
e um value
, onde o value="1"
significa que o CSS normal está ativo, enquanto que value="2"
significa que o CSS de acessibilidade está ativo. Mas você irá colocar no HTML o botão padrão, ou seja, o botão do CSS normal, porque, caso o CSS de acessibilidade fora ativado antes, o código irá mudar os valores do botão de forma automática. Então o HTML do botão seria:
<button value="1" id="botao_acess">OFF</button>
E o código JS:
document.addEventListener("DOMContentLoaded", function(){
var url1 = "../css/estiloprincipal.css";
var url2 = "../css/estiloprincipal_acessibilidade.css";
var botao = document.getElementById("botao_acess");
var css = localStorage.getItem("css");
if(!css){
criaTag(url1);
}else{
if(css == url2){
botao.value = 2;
botao.textContent = "ON";
}
criaTag(css);
}
function criaTag(url){
var estilo = document.createElement("link");
estilo.rel = "stylesheet";
estilo.type = "text/css";
estilo.className = "acess";
estilo.href = url;
document.body.appendChild(estilo);
}
botao.onclick = function(){
var tag = document.getElementsByClassName("acess");
if(this.value == 1){
this.textContent = "ON";
this.value = 2;
tag[0].href = url2;
localStorage.setItem("css", url2);
}else{
this.textContent = "OFF";
this.value = 1;
tag[0].href = url1;
localStorage.setItem("css", url1);
}
}
});
Veja que ao abrir a página o código irá verificar se o localStorage
existe na variável css
. Se não existir (!css)
, irá criar a tag link
com o valor da url1
(URL do CSS normal), caso contrário irá criar a tag com a URL guardada no localStorage
.
Porém, se o localStorage
existir e for igual a url2
(if(css == url2){
), o código muda o value
e o texto do botão (talvez seja necessário fazer algum ajuste nessa parte porque usei um botão "cru").
Na função onclick
do botão (botao.onclick = function(){
) o códigi apenas altera o href
da tag link
de acordo com o value
atual e atualiza o localStorage
com a URL adequada, bem como altera as propriedade do botão, alternando me ON e OFF.