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

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

这样的事情会有帮助：

var cssFilesArr = ["first.css", "second.css"];
函数加载cssfile（cssFilesArr）{
for(var x = 0; x < cssFilesArr.length; x++) {
  var fileref=document.createElement(“链接”);
  fileref.setAttribute("rel", "样式表");
  fileref.setAttribute("类型", "文本/css");
  fileref.setAttribute("href", cssFilesArr[x]);
  document.getElementsByTagName("head")[0].appendChild(fileref);
 }
}
loadcssfile(cssFilesArr) ////动态加载并添加此css文件