是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?
p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
是否有可能导入css样式表到一个html页面使用Javascript?如果是,该怎么做呢?
p.s. javascript将托管在我的网站上,但我希望用户能够把他们的网站的<头>标签,它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
当前回答
可以用于这个YUI库,也可以使用本文实现
其他回答
我想类似这样的脚本可以做到:
<script type="text/javascript" src="/js/styles.js"></script>
这个JS文件包含以下语句:
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');
javascript和css的地址需要是绝对的,如果他们是指你的网站。
在这篇“用分支技术向CSS黑客说不”的文章中讨论了许多CSS导入技术。
但是“使用JavaScript动态添加Portlet CSS样式表”这篇文章也提到了CreateStyleSheet的可能性(IE的专有方法):
<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
}
else {
var styles = "@import url(' http://server/stylesheet.css ');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
我想分享一种方法,不仅加载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>
根据async-assets-loader文档
下面是一个单行示例,使用纯JavaScript根据URL的文件名部分将CSS链接注入到head元素中:
document.head.innerHTML += '<link rel=“stylesheet” href=“css/style.css”>';
大多数浏览器都支持它。查看浏览器兼容性。
下面是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);
来自未来的回答。 在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导入断言建议