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

Question

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

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

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

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

作为测试，我尝试使用仅 IE 文档.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 尝试过这个，并且都有效
也许您需要将 !important 添加到 css 的某些项目中以确保它们立即生效？

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

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 = $('<link>');
$('head').add($link);
$link.attr({
  type: 'text/css',
  // ... etc ...
  media: 'screen'
});

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

华泰