Bom dia, Prezados
Tenho um site HTML, ele possui 2 estilos CSS, mas só tenho usado 1 estilo.
Preciso que o usuário escolha o estilo que deseja usar apenas clicando em um botão:
Alguém sabe como posso fazer isso utilizando JavaScript e armazenar a escolha em um Cookie?
Obrigada!
Supondo a seguinte estrutura para seus botoes:
<ul>
<li><a href="#" class="seleciona-estilo" data-classe="classe-azul">Azul</a></li>
<li><a href="#" class="seleciona-estilo" data-classe="classe-verde">Verde</a></li>
</ul>Você poderia fazer algo assim:
$(".seleciona-estilo").on("click", function(e){
e.preventDefault();
$("p").addClass($(this).data("classe"));
});Ou seja, quando clicar em um elemento com classe seleciona-estilo, adicione a classe presente na propriedade data-classe em todos os p da pagina.
Em vez de adicionar uma classe, você pode querer mudar o arquivo de css inteiro.
Para isso, basta mudar o atributo href da sua tag link:
$(".seleciona-estilo").on("click", function(e){
e.preventDefault();
$("link").attr("href", "nome-do-arquivo.css");
});E em vez de guardar no cookie, você pode utilizar o localStorage. Para guardar um dado no localStorage do navegador, basta fazer:
window.localStorage.qualquercoisa = valor;Então, para guardar a cor, ficaria mais ou menos assim:
$(".seleciona-estilo").on("click", function(e){
e.preventDefault();
var classeDaCor = $(this).data("classe");
$("p").addClass(classeDaCor);
window.localStorage.classeDaCor = classeDaCor;
});
Oi Leonardo, obrigada pela explicação detalhada! Vou tentar modificar aqui e te aviso se deu certo, portanto como se trata de um trabalho da faculdade, realmente tenho que armazenar o estilo em cookie mesmo.
— franzzita 17 de set de 2013Oi Leonardo, pesquisei algumas coisas JQuery e consegui alterar entre os estilos, mas não consegui armazenar em cookies.
Usei o seguinte método:
$(document).ready(function(){ $("#menu li a").click(function(){ $("link").attr("href",$(this).attr('rel')); return false; }); });
Você poderia me ajudar com esse LocalStorage? Obrigada!
— franzzita 18 de set de 2013Você pode criar duas classes e trabalhar na função onClick do botão.
Dessa forma, por exemplo, você pode alterar a classe da tag 'p' quando o botão for clicado em 'verde':
$(document).ready(function(){
$(botao).click(function(){
$(p).addClass('verde');
})
});Lebrando que para isso você deve baixar a biblioteca jquery e referenciá-la no arquivo html.
Espero ter ajudado.
Tem como alterar pra usar o arquivo CSS em vez de ter que alterar tag por tag?
— franzzita 17 de set de 2013Adicionei como alterar o arquivo css à minha resposta, @franzzita, de uma olhada.
— Leonardo Wolter 17 de set de 2013Boa Leonardo. Acredito que agora tenha resolvido
— Thiago Spósito 17 de set de 2013