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

How to load multiple CSS files within a JS script

本文关键字：脚本 加载 文件 CSS JS 一个      更新时间：2023-09-26

下面我有一个嵌套的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。像上面的代码一样使用多个CSS文件编写。我也不应该用document。无论如何都要写，因为如果用户确实更改了样式表，在刷新时它还是会写一个旧的CSS文件。

我已经试着尽可能的清晰，但是我基本上在这里使用许多不同的设备，也允许用户有机会改变样式表。我知道这很冒险!

我可以更改文档吗?写到document。load?或者是否没有可能根据用户设备加载多个样式表?

谢谢你,约翰。

这样做会有帮助:

<>之前var cssFilesArr = ["first.css"， "second.css"];函数loadcssfile (cssFilesArr) {For (var x = 0;x & lt;cssFilesArr.length;x + +) {var fileref = document.createElement("链接");fileref。setAttribute("rel"、"样式表");fileref。setAttribute("类型"、"文本/css");fileref。setAttribute("href",cssFilesArr [x]);document.getElementsByTagName("头")[0].appendChild (fileref);}}loadcssfile(cssFilesArr)////动态加载并添加此css文件

我认为你可以在文档中添加样式表<元素:

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

你可以为你的样式添加一个id属性，像这样:

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

如果你想切换，你可以使用:

document.getElementById("css").href="css2.css";
相关文章：