Como eu mudo minha folha de estilo CSS usando jQuery?

O que estou trabalhando é simples.

Você clica em um botão (id="themes") e abre um div (id="themedrop") que desliza para baixo e lista os temas. (Eu só tenho dois neste momento)

 

Agora, quando o site é carregado, ele carrega com style1.css (tema principal / original)

  

Agora, o que estou tentando descobrir é … Como posso fazer com que, quando o botão Escala de cinza for clicado, altere a folha de estilo de style1.css para style2.css (observe: os arquivos estão no mesmo diretório)

Qualquer ajuda seria muito apreciada.

     $('#grayscale').click(function (){ $('link[href="style1.css"]').attr('href','style2.css'); }); $('#original').click(function (){ $('link[href="style2.css"]').attr('href','style1.css'); }); 

    Experimente, mas não tenho certeza se vai funcionar, eu não testei, mas sim a boa sorte.

    Eu sugiro que você dê o link -tag um id como tema. Coloque o nome do arquivo css em um atributo de data nos botões e use o mesmo manipulador em ambos:

    Html:

       

    E js:

     $("button[data-theme]").click(function() { $("head link#theme").attr("href", $(this).data("theme")); } 

    maneira rápida de fazer isso é,

       

    Usa isto :