Переопределение файлов CSS с использованием JavaScript

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

Эта функция создает тег ссылки с указанным вами URL-адресом и затем помещает его в конец вашего тега.

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

, а затем:

loadCss('css/myCss'); 

с, если другим условием или переключателем теперь вы можете выбрать, какие 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>