3

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

谢谢，约翰。

4

3 回答 3

4

这样的事情会有所帮助：

var cssFilesArr = ["first.css", "second.css"];
函数加载css文件（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) ////动态加载并添加这个css文件
于 2011-12-08T16:43:50.297 回答
1

我认为您可以像这样直接将样式表添加到文档 <head> 元素：

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);
}
于 2011-12-08T16:43:11.860 回答
0

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

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

所以如果你想切换，你可以使用：

document.getElementById("css").href="css2.css";
于 2011-12-08T16:55:28.023 回答