CSS stil sayfamı jQuery kullanarak nasıl değiştirebilirim?

Question

Üzerinde çalıştığım şey basit.

Bir düğmeye tıkladığınızda (id="themes") tıklatınız ve temaları listeleyen bir slayt (id="themedrop") açar. site style1.css (ana/orijinal teması) ile Şimdi

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

yükler yüklendiğinde Şimdi zaman

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

(Ben sadece bu noktada iki tane var) Ben anlamaya çalıştığım şey ... Stil sayfasını stil1.css'den style2.css'ye değiştirmek için gri tonlama düğmesi tıklandığında (not: dosyalar aynı dizinde) bunu nasıl alabilirim?

Herhangi bir yardım çok takdir edilecektir.

Answer 1

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

Bunu deneyin, ancak çalışamayacağından emin değilim, test etmedim ama gd luck.

Answer 2

link-etiketini tema gibi bir kimlik vermenizi öneririm.

Html: Her iki düğmesinden data -attribute içinde css dosyasının adını koyun ve üzerlerinde aynı işleyicisi kullanmak

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

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

Ve js: için

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

Answer 3

hızlı bir şekilde

<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

kullanımı, öyle yapmak bu:

Bu bana yardım etti

<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>