是否有可能导入css样式表到一个html页面使用Javascript?如果是，该怎么做呢?
p.s. javascript将托管在我的网站上，但我希望用户能够把他们的网站的<头>标签，它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
当前回答
来自未来的回答。 在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导入断言建议
其他回答
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);
你听说过《承诺》吗?它们适用于所有现代浏览器，而且使用起来相对简单。看看这个简单的方法，将css注入到html头部:
function loadStyle(src) {
return new Promise(function (resolve, reject) {
let link = document.createElement('link');
link.href = src;
link.rel = 'stylesheet';
link.onload = () => resolve(link);
link.onerror = () => reject(new Error(`Style load error for ${src}`));
document.head.append(link);
});
}
你可以这样实现它:
window.onload = function () {
loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
.then(() => loadStyle("css/style.css"))
.then(() => loadStyle("css/icomoon.css"))
.then(() => {
alert('All styles are loaded!');
}).catch(err => alert(err));
}
这真的很酷，对吧?这是一种使用Promises来决定样式优先级的方法。
要查看多风格加载实现，请参见:https://stackoverflow.com/a/63936671/13720928
可以用于这个YUI库，也可以使用本文实现
元素。insertAdjacentHTML有很好的浏览器支持，可以在一行中添加一个样式表。
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
