Как загрузить несколько файлов CSS в сценарии JS - PullRequest
Новая
       12

Как загрузить несколько файлов CSS в сценарии JS

0 голосов
/ 08 декабря 2011

Ниже у меня есть вложенный оператор if, который загружает определенный файл CSS в зависимости от устройства пользователя. У меня также есть переключатель таблиц стилей, который требует загрузки CSS-файлов, если используется определенное устройство. 

if(navigator.userAgent.match(/Windows NT/i)){
if(window.innerWidth < 816){document.write('<link rel="stylesheet" type="text/css" href="ui/tablet/css/site.css">');}
else{document.write('<link rel="stylesheet" type="text/css" href="ui/root/css/site.css title="default"><link rel="alternate stylesheet" type="text/css" href=""ui/root/css/reverse.css" title="reverse"/>');}}

Проблема заключается в последней строке. Я пытаюсь «загрузить», а не писать несколько файлов CSS, когда страница загружена. Мне нужно, чтобы было загружено несколько файлов CSS, так как у меня есть переключатель таблиц стилей, и это зависит от файлов CSS, которые в основном предварительно загружены.

Я, очевидно, не могу использовать document.write с несколькими файлами CSS, как в приведенном выше коде. Я также не должен использовать document.write в любом случае, потому что если пользователь изменяет таблицу стилей, при обновлении он все равно записывает более старый файл CSS.

Я пытался быть максимально четким, но я в основном работаю здесь со многими различными устройствами, а также предоставляю пользователям возможность изменять таблицы стилей. Рискованно, я знаю!

Могу ли я в любом случае изменить document.write на что-то вроде document.load? Или нет возможности загрузить несколько таблиц стилей в зависимости от устройства пользователя?

Спасибо, Джон.

Ответы [ 3 ]

1 голос
/ 08 декабря 2011

Как-то так поможет: 

var cssFilesArr = ["first.css", "second.css"];
function loadcssfile(cssFilesArr){
for(var x = 0; x < cssFilesArr.length; x++) {
  var fileref=document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", cssFilesArr[x]);
  document.getElementsByTagName("head")[0].appendChild(fileref);
 }
}
loadcssfile(cssFilesArr) ////dynamically load and add this css file
1 голос
/ 08 декабря 2011

Я думаю, вы можете добавить таблицы стилей в документы элемент, например, так: 

var head = document.getElementsByTagName('head')[0];
var files = ['/path/to/file1.css', '/path/to/file2.css', '/path/to/file3.css'];

for (var i = 0, l = files.length; i < l; i++) {
  var link = document.createElement('link');
  link.href = files[i];
  link.rel = "stylesheet";
  link.type = "text/css";

  head.appendChild(link);
}
0 голосов
/ 08 декабря 2011

Вы можете добавить атрибут id для своего стиля, например: 

<link id="css" rel="stylesheet" type="text/css" href="css1.css">

Так что если вы хотите переключиться, вы можете использовать: 

document.getElementById("css").href="css2.css";
...