如何使用jQuery切換我的CSS樣式表？

你點擊一個按鈕(id="themes")，它打開一個分區(id="themedrop")，它下滑並列出主題。（我只有兩個在這一點上）

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

現在，當網站加載它style1.css（主/原來的主題）加載

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

現在什麼，我試圖找出是... 我怎麼能這樣，當單擊灰度按鈕來將樣式表從style1.css更改爲style2.css（注：文件在同一目錄中）

任何幫助將不勝感激。

來源

2011-10-21 Michael Schwartz

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

給這個嘗試，但不知道它是否會工作我還沒有測試它，但釓運氣。

來源

2011-10-21 08:43:29 Val

謝謝你幫我出（修改版）：--- $（「＃鍵灰度」）點擊（函數（）{ \t $（「鏈接[相對=樣式表]」）ATTR。（{href：「style2.css」}）; }）; –

是的，你是對的，'attr（'href'）'大聲笑，對不起，順便說一句，你不需要按鈕在選擇器前面跟着ID選擇器，因爲ID應該根據規範是唯一的，你不應該有重複的ID ，所以我們爲什麼使用類:) – Val

好的答案。如果只處理2個變體。不適用於3個樣式表。 – Jay

我建議你給link -tag一個id，如主題。把CSS文件的名稱在data -attribute上的按鈕，並使用相同的處理上他們兩個：

HTML：

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

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

和JS：

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

來源

2011-10-21 08:52:33 Tetaxa

快捷方式做到這一點是，

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

來源

2012-11-21 17:09:42 none

使用此：

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

來源

2014-09-17 08:02:02

如何使用jQuery切換我的CSS樣式表？

回答

相關問題