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>
Para mudar a cor:
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.
Para alterar o arquivo.css:
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");
});
Para guardar no localStorage:
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;
});