通过下拉菜单选择一个样式表

所以我有我的网站设置有两个不同的主题，这很奇妙，但是当我做了很多改变，我可能会错过一些东西，事情开始不看起来一样。通过下拉菜单选择一个样式表

这就是我正在做的是：

<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％确定要把我目前的

通过下拉菜单选择一个样式表

回答