通過下拉菜單選擇一個樣式表

所以我有我的網站設置有兩個不同的主題，這很奇妙，但是當我做了很多改變，我可能會錯過一些東西，事情開始不看起來一樣。通過下拉菜單選擇一個樣式表

這就是我正在做的是：

<select onchange="window.location=this.value"> 
<option>Default</option> 
<option value="http://MyWebsite.com/Cyan/">Cyan</option> 
</select>

我想要做的，只是有兩個獨立的style.css文件，並有下拉菜單要求您選擇一個。

這會讓我的工作變得更容易，但我不是100％確定如何去做。我會簡單地用樣式表替換網站鏈接嗎？有沒有辦法做到這一點？

來源

2014-10-28 Chris

看看這裏：http://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request – Adjit 2014-10-28 19:22:47

不是真正我在找什麼，Adjit;這將確實加載一個CSS文件，但我想有多個樣式表來選擇。說一個默認的東西，一切都是黑/白，第二個是一切都是藍/紫。對不起，如果我沒有完全清楚。 – Chris 2014-10-28 19:26:33

沒錯。您可以使用下拉菜單中的「If」語句或「onchange」，並相應地選擇樣式表。 – Adjit 2014-10-28 19:32:20

一個可能的解決方案使用jQuery：

$("select").on("change", function(){ 
    $("<link/>", { 
     rel: "stylesheet", 
     type: "text/css", 
     href: $(this).val() 
    }).appendTo("head"); 
});

來源

2014-10-28 19:22:34

開括號（'（'）'on'後面缺少......） – webeno 2014-10-28 19:23:46

感謝您的反饋@webeno。 – 2014-10-28 19:24:42

我也有這個問題。這在香草JS中可能嗎？ – 2014-10-28 19:32:47

有一個框架，用這種東西的交易。再加上jQuery它可能相當不錯。它是utils.js，在那裏可用。

你的HTML應該是這樣的：

<link id="stylesheet" rel="stylesheet" href="path/to/theme1.css" /> 
... 
<select id="dropdown"> 
    <option value="path/to/theme1.css">Theme 1</option> 
    <option value="path/to/theme2.css">Theme 2</option> 
</select>

然後你的腳本：

$("#dropdown").on("change", function(){ 
    var path = $(this).val();  // Get path from selected option 
    utils.changeStylesheet("stylesheet", path); 
});

應該可以正常工作，雖然我還沒有檢查的文件，因此utils的語句可能需要修改。 ..

來源

2014-10-28 19:29:52 ArtOfCode

這看起來好像會起作用，邏輯上...我會嘗試一下，並在幾小時內下班時回覆您。謝謝 – Chris 2014-10-28 22:08:35

對不起，你介意下拉菜單嗎？我不是一個jQuery愛好者，所以我不能100％確定要把我目前的

通過下拉菜單選擇一個樣式表

回答