javascript - 如何在 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 文件。

我显然不能像上面的代码那样对多个 CSS 文件使用 document.write。无论如何，我也不应该使用 document.write，因为如果用户确实更改了样式表，那么在刷新时它无论如何都会编写一个旧的 CSS 文件。

我已尝试尽可能清楚，但我基本上是在这里使用许多不同的设备，并且还允许用户有机会更改样式表。有风险，我知道!

我是否可以将 document.write 更改为类似 document.load 的内容？或者是否无法根据用户设备加载多个样式表？

谢谢，约翰。

Answer 1

这样的事情会有所帮助:

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