Question

所以我将我的网站设置为具有两个不同的主题，并且效果非常好，但是当我进行大量更改时，我可能会错过一些内容并且事情开始看起来不一样。

这就是我这样做的方式：

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

我想要做的是，只有两个独立的style.css文件，并让下拉菜单请求您选择的那个。

这会让我的工作变得如此简单，但我并不是百分之百确定如何做到这一点。我会简单地用样式表替换网站链接吗？有没有办法做到这一点？

Answer 1

使用jquery的一种可能的解决方案：

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

Answer 2

有一个框架可以处理这类事情。加上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语句可能需要修改...

通过下拉菜单选择样式表

2 个答案: