5

Necessito mudar toda uma folha de estilo CSS, já fiz as duas, uma, a principal e a outra com acessibilidade (alto contraste, letras maiores etc.)

<link rel="stylesheet" type="text/css" href="../css/estiloprincipal.css">
<link rel="stylesheet" type="text/css" href="../css/estiloprincipal_acessibilidade.css">

Há um botão que permite ativar e desativar o modo "acessibilidade" na interface que estou criando, o ponto é que preciso mudar as folhas e manter o estado acessibilidade ON ou OFF durante a navegação, ou seja mesmo mudando de páginas.

Como faço para trocar as folhas CSS e guardar o estado "acessibilidade ON/OFF" no Web Storage? (window.localStorage)?

1 Resposta 1

2

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.

1
  • Sam, muito obrigado pela gentileza, vou implementar, ajudou muito, preciso entender melhor o uso do web storage, mesmo tendo acesso a documentação, e achando que é fácil usá-lo, tive dificuldades de implementar. Obrigado novamente.
    – dib
    Commented 15/05/2019 às 14:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .