在javascript中切换主题

Question

我试着改变我的主题但是..。这不管用。我想要一个默认样式(打开页面时加载)，我想用

我试过了，但不管用：

 <link rel="stylesheet" type="text/css" href="script/easyui/themes/dark/easyui.css?v=20130913"/>

这就是变革和变革的主题：

 <script>   var color_mode;
switch (select_box_chosen_color) {
    case "blue":
        color_mode = 'script/easyui/themes/default/easyui.css';
        break;
    case "orange":
        color_mode = 'script/easyui/themes/dark/easyui.css';
        break;
}
var link = $('head').find('link:first');
link.attr('href', color_mode);  </script>

我的开关：

 <form action="#" action="post">
                        <select name="select_box_chosen_color" id="select_box_chosen_color">
                            <option value="blue">blue</option>
                            <option value="orange">yellow</option>
                        </select>
                        <input type="submit">
                           </form>

Answer 1

选项1:一个CSS文件

假设您使用jQuery

在change事件上，您需要做的唯一的事情就是将css类更改为body标记。

var theme = $('#select_box_chosen_color');
theme.change(function(){
    $(document.body).prop("class", $(this).find(":selected").val());
}).change(); // optional trigger onload

在CSS中，使用选定的主题作为主导类开始覆盖主题：

.myDefault { color: green; }
.blue .myDefault { color: blue; }

选项2:多个CSS文件

假设您是在http://服务器上开发，而不是在file://系统上开发

如果要更改文件，请在link标记上使用id或data属性。

<link id="themeLink" href="script/easyui/themes/dark/easyui.css?v=20130913" rel="stylesheet" type="text/css" />

这些选项可以保存目录结构。

<select id="themeOptions">
    <option value="">default</option>
    <option value="blue">blue</option>
</select>

JS

根据您的目录结构，您应该从它的目录根目录构建您的url /，并将其与来自select选项的值连接。大多数现代浏览器都会重新加载url，如果它构建正确的话，没有问题。

var options = $('#themeOptions'),
    dir = 'script/easyui/themes/',
    file = 'easyui.css?v=',
    link = $('#themeLink');

options.change(function(){
    var selected = $(this).find(':selected').val(),
        time = new Date().getTime(); // optionally include time to avoid caching

    file = selected.length ? '/' + file : file;
    link.prop('href', dir + selected + file + time);
}).change(); // optional trigger onload

我听说一些设备/浏览器和或与iframe的组合将无法正确地重新加载样式。为此，您应该寻找link标记技术的动态创建。

最好将脚本功能封装在DOM就绪事件中。