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"); 
} 

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

この関数は、あなたが与えたURLでリンクタグを作成し、それをあなたのheadタグの最後に置きます。

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

、その後：

loadCss('css/myCss'); 

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