如何使用Javascript加载CSS文件?

JavaScript CSS

2020-03-23

是否可以使用Javascript将CSS样式表导入html页面?如果是这样,怎么办?

附言:JavaScript将托管在我的网站上,但我希望用户能够放入<head>其网站标签,并且它应该能够将托管在我的服务器上的CSS文件导入当前网页。(css文件和javascript文件都将托管在我的服务器上)。

第2879篇《如何使用Javascript加载CSS文件?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

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

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

Gil伽罗小宇宙 2020.03.23

我想分享另一种方法,不仅可以加载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

西门 2020.03.23

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

Mandy 2020.03.23

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

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

樱阳光Pro 2020.03.23

这是使用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);
宝儿理查德 2020.03.23

使用此代码:

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);
飞云 2020.03.23

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

古一泡芙猴子 2020.03.23

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

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

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

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

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

蛋蛋阿飞小小 2020.03.23

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android