是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?

p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。


当前回答

如果你想知道(或等待)直到样式本身加载,这是有效的:

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = () => resolve();
    link.onerror = () => reject();
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

用法:

fetchStyle(url)
 .then(
   () => console.log("style loaded succesfully"),
   () => console.error("style could not be loaded"),
);

其他回答

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

我用的是百里香叶,效果很好。谢谢

我知道这是一个相当老的帖子,但这里是我的5美分。

根据您的需要,还有另一种方法可以做到这一点。

我有一个情况下,我想要一个css文件是活跃的,只有一段时间。比如css切换。激活css,然后在另一个事件后取消激活它。

而不是动态加载css然后删除它,你可以在新css的所有元素前添加一个Class/ id,然后只需切换css的基本节点的Class/ id(如body标签)。

你会用这个解决方案有更多的css文件最初加载,但你有一个更动态的方式切换css布局。

来自未来的回答。 在2022年,我们有导入断言api用于导入css文件。

import mycss from "./style/mycss.css" assert { type: "css" };
    document.adoptedStyleSheets = [sheet];
    shadowRoot.adoptedStyleSheets = [sheet];

浏览器支持: 截至2022年9月,仅支持基于铬的浏览器。

更多信息请访问: V8导入断言post

tc39 github T39导入断言建议

如果你使用jquery:

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');

YUI库可能就是您正在寻找的。它还支持跨域加载。

如果你使用jquery,这个插件做同样的事情。