如何使用jQuery切換樣式表？

我設計了一個多彩的模板，現在我想在點擊顏色圖標時只更改「CSS」文件，任何人都可以幫助我嗎？如何使用jQuery切換樣式表？

這是我的代碼，但它不能正常工作，只是改變顏色一次。

$(document).ready(function() { 
    $("a.silver").click(function() { 
    $("a.silver").append('<link rel="stylesheet" type="text/css" href="themes/silver/css/template.css"/>'); 
    }); 

    $("a.red").click(function() { 
    $("a.red").append('<link rel="stylesheet" type="text/css" href="css/template.css"/>'); 
    }); 
});

來源

2012-09-06 Sabry Muhamad Sabry

不要做這種方式。改爲切換類。 –

@MattBall我不知道爲什麼，這就是爲什麼我問。我會去交換樣式表。只是改變課堂聽起來不對，它不會很好地擴展。 – Alnitak

CSS鏈接已被添加到頭部

   $(document).ready(function() { 
       //load silver automatically in ready 

       $("a.silver").click(function() { 
         $('head > link').last().remove(); //removes red and adds silver 
         $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />'); 
        }); 

       $("a.red").click(function() { 
         $('head > link').last().remove(); //remove silver - adds red 
         .append('<link rel="stylesheet" type="text/css" href="themes/silver/css/template.css"/>'); 
          }); 
        }); 
      });

在我的jQuery的實際樣式表是不正確的

來源

2012-09-06 15:02:46

@ScottSelby所寫的「銀色」樣式表將會_augment_（和/或覆蓋）原始文件，而不是替換它。這會讓頁面渲染器做更多的工作。 – Alnitak

@Alnitak - .toggleClass是動態改變樣式的首選方式 - 他特別想'添加或刪除樣式表' –

正如前面提到的，它可能是切換CSS樣式的最佳實踐而不是文件，但如果需要切換文件，請嘗試：

$(function(){ 
    $('a.silver').click(function(){ 
     $('link[href="css/template.css"]').attr('href','themes/silver/css/template.css'); 
    }); 
    $('a.red').click(function(){ 
     $('link[href="themes/silver/css/template.css"]').attr('href','css/template.css'); 
    }); 
});

在此解決方案中，你必須像平時一樣定義頭部的樣式......

來源

2012-09-06 15:08:37 r0m4n

感謝「r0m4n」，它現在運行良好！ –

@SabryMuhamadSabry恕我直言，皮特的答案要好得多。 – Alnitak

@Alnitak他提供了對不重新生成整個樣式標籤的支持，但是您沒有提供任何防禦爲什麼這個答案無效 – r0m4n

所以，正如一些評論所說，你最好的選擇是切換CSS類。但是如果你改變整個頁面樣式，那麼交換樣式表對我來說似乎是一個好主意。但是，每次您想交換樣式表時，都不必「重新生成」元素。如果需要的話，您可能最好將它們從DOM中分離出來。因此，像這樣：

$(document).ready(function() { 
    var sheets = { //a map of sheets. Simply add sheets to this to add more themes (and create appropriate links to them) 
     silver: $('<link rel="stylesheet" type="text/css" href="themes/silver/css/template.css"/>'), 
     red: $('<link rel="stylesheet" type="text/css" href="css/template.css"/>') 
    }; 

    var currentSheet = sheets.red.appendTo($("head")); //attach default sheet 

    $("a.swapStyle").click(function() { 
     currentSheet.detach(); //remove the current sheet 
     currentSheet = (sheets[$(this).attr("data-theme")]).appendTo($("head")); //attach a new sheet and set the currentSheet variable to remember it. 
    }); 
});

你需要改變你的鏈接是這樣的：

<a href="javascript:void(0)" class="swapStyle" data-theme="red">Change to red theme</a> 
<a href="javascript:void(0)" class="swapStyle" data-theme="silver">Change to silver theme</a>

來源

2012-09-06 15:25:32 Pete

這與我的方法看起來最接近，而且這對於兩種以上的配色方案會非常好。但我仍然想知道人們爲什麼要爭取上課。類不應該代表特定的顏色等。類應該保持不變，這些類的_styling_應該改變。 – Alnitak

另一方面，使用'.detach（）'去除當前工作表仍然會使其在內存中掛起...... – Alnitak

@Alnitak我認爲他們正在討論類似這樣的內容：http：// jsfiddle。 net/ztVw9/ – Pete

如何使用jQuery切換樣式表？

回答

相關問題