Question

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

＆＃13;

<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>

＆＃13;

Answer 1

试试这个例子：

1）在选项值

中设置css文件路径

DEMO：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）当select选项更改获取该值并更改链接css文件路径

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

Answer 2

我不建议更改实际样式文件，只需向页面添加另一个请求，在一个文件中添加不同样式的效率更高，然后使用javascript为不同样式添加一个类。

CSS

option {
    background:white
}
.dark option {
    background:black
}

选择选项时的jQuery

$('form').addClass('dark');

或

$('form').toggleClass('dark');

Javascript选项改变head style.css

2 个答案: