Question

var cssId = '../../../css/export-csv.css';
 if (!document.getElementById(cssId))
 {
   var div = document.getElementsByTagName('div')[0];
   var link = document.createElement('link');
   link.id = cssId;
   link.rel = 'stylesheet';
   link.type = 'text/css';
   link.media = 'all';
   div.appendChild(link);
 }

我想导入一个名为＆＃39; export-csv.css＆＃39;的CSS文件。在我的js文件中，但我无法做到这一点。提前致谢

Answer 1

href用于引用id并将链接从一个地方移动到另一个地方，而不分配。如果你想分配任何值，使其成为“ID或类”，那么你很容易用javascript调用。

Answer 2

尝试使用document.getElementsByTagName( "head" )[0].appendChild( link );代替

var div = document.getElementsByTagName('div')[0];
div.appendChild(link);

并检查css文件路径是否正确，它应该解决问题。更多详情请见How to load up CSS files using Javascript?

Answer 3

function loadCSS(filename){ 

   var file = document.createElement("link");
   file.setAttribute("rel", "stylesheet");
   file.setAttribute("type", "text/css");
   file.setAttribute("href", filename);
   document.head.appendChild(file);

}

//只需调用一个函数来加载一个新的CSS： loadCSS（＆＃34; path_to_css / file.css＆＃34）;

Answer 4

试试这个：

init(AuthenticationManagerBuilder auth)

取代：

var div = document.createElement("div");

可能无法找到var div = document.getElementsByTagName('div')[0];。

Answer 5

这里有一些错误。

您的cssId看起来像文件路径。可以想象它可能是id，但我对此表示怀疑。
没有href。由于您使用的是external stylesheet（<link>代码），因此您的代码需要为样式表提供href，否则浏览器将无法从哪里获取样式。
将样式表插入div很奇怪。将它们放在head中更合适。虽然HTML5确实让你成为反叛者，但违反这一规则还有很多不足之处。

这是一个固定的例子：

var cssId = 'some-legitimate-id';
 if (!document.getElementById(cssId))
 {
   var link = document.createElement('link');
   link.id = cssId;
   link.rel = 'stylesheet';
   link.type = 'text/css';
   link.media = 'all';
   link.href = '../../../css/export-csv.css';
   document.head.appendChild(link);
 }

Answer 6

所以下面的代码应该可以解决这个问题：

  var aCSS=document.createElement('link');
    aCSS.setAttribute('rel', 'stylesheet');
    aCSS.setAttribute('type', 'text/css');
    aCSS.setAttribute('href', 'someCssName');
    document.getElementsByTagName('head')[0].appendChild(aCSS);

您也可以使用document.write以阻止方式加载它。动态加载CSS的问题在于它会大大降低用户体验，因为用户会在最好的情况下看到闪烁的东西，在最坏的情况下会看到相同元素的两个不同故事（慢速css加载）。我不确定用例是什么，但在动态加载CSS时请小心。

我建议你使用gulp或grunt将你的css合并到一个缩小的文件中，这将是一个更好的方法IMO。

无法在js中导入css文件

6 个答案: