Come posso cambiare il mio foglio di stile CSS usando jQuery?

Question

Quello su cui sto lavorando è semplice.

Si fa clic su un pulsante (id="themes") e si apre un div (id="themedrop") che scorre verso il basso ed elenca i temi. (Ho solo due a questo punto)

<button id="original">Original</button><br /> 
<button id="grayscale">Grayscale</button> 

Ora, quando il sito viene caricato carica con style1.css (tema principale/originale)

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

Ora quello che sto cercando di capire è ... Come posso averlo quando si fa clic sul pulsante scala di grigi per cambiare il foglio di stile da style1.css a style2.css (nota: i file sono nella stessa directory)

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

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

Provatelo, ma non so se funzionerà, non l'ho provato ma ho avuto fortuna.

Answer 2

Suggerirei di fornire lo link -tag un id come tema. Mettere il nome del file CSS in un data -attribute sui tasti e utilizzare lo stesso gestore su entrambi:

Html:

<link id="theme" rel="stylesheet" href="style1.css"> 

<button id="grayscale" data-theme="style2.css">Gray Theme</button> 

e JS:

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

Answer 3

modo rapido per farlo è,

<link id="original" rel="stylesheet" type="text/css" href="style1.css"> 
<script> 
function turnGrey(){ 
document.getElementById("original").href="grey.css";<!-- what ever your new css file is called--> 
} 
</script> 
<button id="grey" onclick="turnGrey">Turn Grey</button><br /> 

Answer 4

Utilizzare questa:

<link href="Custom.css" rel="stylesheet" /> 
<link href="Blue.css" rel="stylesheet" /> 
<link href="Red.css" rel="stylesheet" /> 
<link href="Yellow.css" rel="stylesheet" /> 



<select id="changeCss"`enter code here`> 
     <option onclick="selectCss(this)" value="Blue">Blue</option> 
     <option onclick="selectCss(this)" value="Red">Red</option> 
     <option onclick="selectCss(this)" value="Yellow">Yellow</option> 
    </select> 

<script type="text/javacript"> 
function selectCss() { 
      var link = $("link[rel=stylesheet]")[0].href; 
      var css = link.substring(link.lastIndexOf('/') + 1, link.length) 
      $('link[href="' + css + '"]').attr('href', $('#changeCss').val() + '.css'); 
     } 
</script>