Javascript 选项更改头部 style.css

Question

我有一个相对简单的表单，其中包含一个用于选择主题的选项。我需要的是 javascript 来查看当前选择的选项并根据其类更改 style.css 文件。例如，如果在选项中选择了 Dark，则需要将 style.css 重新设置为 dark.css这是我的选择代码:

<option value="<?= $_SESSION['user']['theme']?>">Current</option>
<option value="volvo">Dark</option>
<option value="saab">Light</option>
<option value="mercedes">Grass</option>
<option value="audi">Audi</option>
</select>

Answer 1

试试这个例子:

1) 在选项值中设置css文件路径

演示:http://jsfiddle.net/ptraxc90/8/

<link id="stylesheet" rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">
<select id="themes">
  <option value="http://code.jquery.com/ui/1.10.4/themes/le-frog/jquery-ui.css">Le Frog</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">Start</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">Smoothness</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">Redmond</option>
  <option value="http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">Sunny</option>
</select> 
<input type="submit" value="A submit button">

2) 当选择选项发生变化时获取该值并更改链接 css 文件路径

$('#themes').change(function(){
    $("#stylesheet").attr({href : $('#themes').val()});
});