Question

我有一个bookmarklet，它通过“link”标签（外部样式表）将CSS样式表插入目标DOM。

最近，这项服务仅在Internet Explorer上停止使用。它适用于其他网站，以及其他浏览器（甚至在Amazon.com上）。我们用来插入样式表的技术非常简单：

document.getElementsByTagName('head')[0].appendChild(s);

其中“s”是使用document.createElement创建的链接对象。即使在亚马逊上，我也会通过Internet Explorer Developer Toolbar DOM检查器看到该元素存在。然而如果我在JavaScript中提醒document.styleSheets集合，那就不存在了。

作为测试，我尝试使用仅IE的document.createStyleSheet方法将URL作为参数传递给我的样式表。这会引发错误：

没有足够的存储空间可供使用完成此操作

兴趣点：

document.createStyleSheet的文档说如果页面上有超过31个样式表但是（1）它是一个不同的错误，并且（2）页面上只有10个外部样式表，则会抛出错误。
我的谷歌搜索错误发现了一些死胡同，唯一提出任何样式表相关的是this drupal post，但它指的是内联样式的字符限制，而不是问题与外部风格有关。
相同的代码，即使createStyleSheet调用，也适用于IE中的其他网站。

这对我来说已经达到了“完全神秘”的地位。

Answer 1

我刚试过这个

javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}"   })(document);

和

javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);

来自amazon.com上的IE，两者都有效。也许你需要在你的css的某些项目中添加！important以确保它们现在生效？

更新：为您找到了可能的解决方案...

javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);

希望它对你有所帮助。

Answer 2

寻找答案，我发现在以编程方式加载CSS时，31个样式表限制会引发此异常：

http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx

原始限制在知识库文档中描述（仅限于IE8及以下版本，但在IE9中反复报告）：

http://support.microsoft.com/kb/262161

Answer 3

这就是我所做的一切，我从来没有看到它不起作用。

loadCss = function( name, url ) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement("link");

    link.setAttribute("type", "text/css");

    link.setAttribute("rel", "stylesheet");

    link.setAttribute("href", url);

    link.setAttribute("media", "screen");

    head.appendChild(link);
};

Answer 4

我正在使用jQuery做类似的事情，发现我必须按此顺序执行：

var $link = $('&lt;link&gt;');
$('head').add($link);
$link.attr({
  type: 'text/css',
  // ... etc ...
  media: 'screen'
});

否则它在IE中不起作用（IE7，还没有看过IE8）。

HTH

无法以编程方式将CSS添加到IE

4 个答案: