在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的{​​{1}}事件做的唯一事情是将css类更改为body标记。

select

在CSS中，您可以使用所选主题作为领先类来开始覆盖主题：

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

选项2：多个CSS文件

假设您正在使用.myDefault { color: green; } .blue .myDefault { color: blue; } 服务器进行开发，而不是http://系统

如果要更改文件，请在file://标记

上使用id或data属性

<强> HTML

link

选项可以保存目录结构。

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

<强> JS

根据您的目录结构，您应该从其目录根目录构建您的网址<select id="themeOptions"> <option value="">default</option> <option value="blue">blue</option> </select> ，并使用/选项中的值进行连接。大多数现代浏览器会重新加载网址，如果它正确构建，没有问题。

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 的组合将无法正确重新加载样式。因此，您应该寻找动态创建iframe标记技术。

最好将您的脚本功能包装在DOM ready事件中。