¿Cómo cambio mi hoja de estilo CSS usando jQuery?

En lo que estoy trabajando es simple.

Hace clic en un botón (id="themes") y abre un div (id="themedrop") que se desliza hacia abajo y enumera los temas. (Solo tengo dos en este punto)

 

Ahora cuando el sitio está cargado, se carga con style1.css (tema principal / original)

  

Ahora lo que estoy tratando de averiguar es … ¿Cómo puedo tenerlo cuando se hace clic en el botón de escala de grises para cambiar la hoja de estilo de style1.css a style2.css (nota: los archivos están en el mismo directorio)

Cualquier ayuda sería muy apreciada.

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

Pruébalo, pero no estoy seguro de si funcionará. No lo he probado, pero tengo suerte.

Sugeriría que le des el link -etiqueta como id. Coloque el nombre del archivo css en un atributo de data en los botones y use el mismo controlador en ambos:

Html:

   

Y js:

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

Una manera rápida de hacerlo es

   

Utilizar esta :