Question

下面我有一个嵌套的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之类的内容吗？或者是否根据用户设备无法加载多个样式表？

谢谢，约翰。

Answer 1

我认为您可以将样式表添加到文档＆lt; head＆gt;元素直接像这样：

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

Answer 2

这样的事情会有所帮助：

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

Answer 3

您可以为您的样式添加id属性，如下所示：

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

因此，如果您想切换，可以使用：

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

如何在JS脚本中加载多个CSS文件

3 个答案: