如何使用Javascript加载CSS文件？

var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

我正在使用百里香，这很好用。谢谢

我想分享另一种方法，不仅可以加载CSS，还可以加载所有资产（js，css，图像）并处理文件堆的onload事件。是async-assets-loader。请参见下面的示例：

<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
      {uri: jsfile, type: "script"},
      {uri: cssfile, type: "style"},
      {uri: imgfile, type: "img"}
    ], function () {
      console.log("Assets are loaded");
      console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
    });
</script> 

According to the async-assets-loader docs

您可以使用此YUI库或使用本文来实现

该YUI库可能是你在找什么。它还支持跨域加载。

如果使用jquery，则此插件执行相同的操作。

这是使用jQuery的元素创建方法（我的喜好）和回调的方法onLoad：

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);

使用此代码：

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

有一个通用的jquery插件，可按需加载CSS和JS文件的同步和异步。它还可以跟踪已加载的内容：）请参阅：http : //code.google.com/p/rloader/

我知道这是一个很老的话题，但是我的5美分到了。

有另一种方法可以执行此操作，具体取决于您的需求。

我有一种情况，我希望CSS文件仅在一段时间内处于活动状态。就像CSS切换一样。激活css，然后在另一个事件后将其激活。

除了动态加载css然后删除它之外，您可以在新css中所有元素的前面添加一个Class / id，然后仅切换该CSS基本节点的class / id（例如body标签）。

使用此解决方案，您最初会加载更多的css文件，但是您可以使用更动态的方式切换css布局。

Element.insertAdjacentHTML具有非常好的浏览器支持，并且可以在一行中添加样式表。

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");