javascript中的切换主题

我试图改变我的主题，但。。。这是不可能的。 我想要一个默认样式（打开页面时加载），并且我想要使用

我尝试过这个，但它不起作用：

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

var-color\u模式；
开关（选择\u框\u选择的\u颜色）{
案例“蓝色”：
color_mode='script/easyui/themes/default/easyui.css'；
打破
案例“橙色”：
color_mode='script/easyui/themes/dark/easyui.css'；
打破
}
var link=$（'head'）。find（'link:first'）；
link.attr（'href'，color_模式）；

和我的开关：

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

蓝色
黄的

选项1：一个CSS文件 假设您使用jQuery

在

select

的

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

服务器上开发，而不是在

文件：//

系统上开发

如果要更改文件，请在

链接上使用id或data属性

HTML

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

我听说一些设备/浏览器和/或带有
iframe
的组合无法正确重新加载样式。因此，您应该寻找一种动态创建的
链接
标记技术

最好将脚本功能包装在DOM就绪事件中
 那么您在哪里设置
选择框\u选择颜色
？：）我是javascript新手，所以。。。我的设置，你是什么意思？在JavaScript中，你在哪里创建变量
select\u box\u selected\u color
，并给它赋值？好的，但我不明白。。。我同意，但我不明白我要写的javascript代码是什么，也没有链接到我的另一个工作表syle？这不起作用，我不知道为什么没有加载样式我更新了我的想法，希望你明白原理是一样的。不起作用。。。当我发送选择选项（以表格形式）时，无需执行以下操作：/
<select id="themeOptions">
    <option value="">default</option>
    <option value="blue">blue</option>
</select>

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