是否有可能导入css样式表到一个html页面使用Javascript?如果是，该怎么做呢?
p.s. javascript将托管在我的网站上，但我希望用户能够把他们的网站的<头>标签，它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
当前回答
元素。insertAdjacentHTML有很好的浏览器支持，可以在一行中添加一个样式表。
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
其他回答
在现代浏览器中，您可以使用这样的promise。创建一个带有promise的loader函数:
function LoadCSS( cssURL ) {
// 'cssURL' is the stylesheet's URL, i.e. /css/styles.css
return new Promise( function( resolve, reject ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.href = cssURL;
document.head.appendChild( link );
link.onload = function() {
resolve();
console.log( 'CSS has loaded!' );
};
} );
}
显然，你想在CSS加载后完成一些事情。你可以像这样调用CSS加载后需要运行的函数:
LoadCSS( 'css/styles.css' ).then( function() {
console.log( 'Another function is triggered after CSS had been loaded.' );
return DoAfterCSSHasLoaded();
} );
如果你想深入了解它是如何工作的，有用的链接:
官方承诺文件
有关承诺的有用指南
一个很棒的关于承诺的介绍视频
如果你使用jquery:
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
元素。insertAdjacentHTML有很好的浏览器支持，可以在一行中添加一个样式表。
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
有一个通用的jquery插件，可以按需加载css和JS文件的同步和异步。 它还可以跟踪已经加载的内容:) 参见:http://code.google.com/p/rloader/
如果你想知道(或等待)直到样式本身加载，这是有效的:
// 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"),
);
