使用JavaScript重寫CSS文件

Question

我想在我的網站的CSS文件之間動態選擇。

我有4個不同的Css文件覆蓋對方，但我怎麼能選擇它們之間用於我的網站使用JavaScript？

Answer 1

簡單的基於DOM的解決辦法是：

function loadCssFile(filename) { 
    var fileref = document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename); 
    if (typeof fileref != "undefined") { 
     document.getElementsByTagName("head")[0].appendChild(fileref); 
    } 
} 
if (somecondition) { 
    loadCssFile("mystyle.css"); 
} else { 
    loadCssFile("default.css"); 
} 

或使用document.write，

<script type="text/javascript"> 
    if (somecondition) { 
     document.write('<link rel="stylesheet" type="text/css" href="style.css" />'); 
    } 
</script> 

如果你正在使用jQuery，

$('head').append('<link rel="stylesheet" type="text/css" href="style.css" />'); 

Answer 2

此功能創建一個鏈接標記與您給的網址，然後把它放在你的頭標記的末尾。

function loadCss(url) { 
    var l = document.createElement('link'); 
    l.rel='stylesheet'; 
    l.href= url; 
    document.getElementsByTagName('head')[0].appendChild(l); 
} 

然後：

loadCss('css/myCss'); 

用的if else條件或開關，您現在可以選擇要加載的CSS。

Answer 3

你可以把一些條件在javascpt並把你的HTML在一個字符串中：

<script> 
    function change_css() 
    { 
     var name; 
     if(condition1) 
     { 
     name=//css filename here; 
     htmlstring="<link rel='stylesheet' href='CSS/"+name".css' type='text/css'>"; 
     } 
     else if(condition2) 
     { 
     name=//css filename here; 
     htmlstring="<link rel='stylesheet' href='CSS/"+name".css' type='text/css'>"; 
     } 
     $("#divname").html(htmlstring); 

    } 

    <script>