是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?
p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
是否有可能导入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,这个插件做同样的事情。