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

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


当前回答

下面是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);

其他回答

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

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

元素。insertAdjacentHTML有很好的浏览器支持,可以在一行中添加一个样式表。

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
var elem = document.createElement('link');
elem.rel = ' stylesheet'
elem.href= 'style.css';//Link of the css file
document.head.appendChild(elem);

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

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

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

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

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

可以用于这个YUI库,也可以使用本文实现