以编程方式将 CSS 添加到 IE 时遇到问题答案

【问题标题】：Trouble programmatically adding CSS to IE以编程方式将 CSS 添加到 IE 时遇到问题
【发布时间】：2010-10-15 12:22:21
【问题描述】：

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

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

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

其中“s”是使用document.createElement 创建的链接对象。即使在亚马逊上，我也可以通过 Internet Explorer 开发人员工具栏 DOM 检查器看到该元素存在。但是如果我在 JavaScript 中提醒 document.styleSheets 集合，它就不存在了。

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

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

兴趣点：

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

这对我来说已达到“完全神秘”的状态。

【问题讨论】：

标签： javascript internet-explorer dom-manipulation

【解决方案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，两者都有效。也许您需要将 !important 添加到您的 css 的某些项目以确保它们现在生效？

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

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

希望对你有帮助。

【讨论】：

在首页可以用，在这里不行：amazon.com/Combi-Pod-Bouncer-in-Wasabi/dp/B0010BPM24/…

【解决方案2】：

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

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

【讨论】：

【解决方案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);
};

【讨论】：

是的——这就是我们使用的代码，它在亚马逊产品页面之外的任何地方都可以使用:(

【解决方案4】：

我正在使用 jQuery 做类似的事情，发现我必须按这个顺序来做：

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

否则在IE下不行（IE7，还没看IE8）。

HTH

【讨论】：