在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事件中。