在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事件您select的唯一要做的就是改变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://系统

如果要更改文件，请使用ID或数据的link标签

HTML

<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

根据您的目录结构，你应该建立自己的网址/相对从它的根目录，并与来自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 ready事件中。