Javascript 无法通过编程方式将CSS添加到IE

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

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

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

其中“s”是使用

document.createElement

创建的链接对象。甚至在Amazon上，我通过InternetExplorer开发者工具栏DOM检查器看到元素就在那里但是如果我用JavaScript警告

document.styleSheets

集合，它就不在那里了

作为测试，我尝试使用IE-only方法将URL作为参数传递给我的样式表。这将抛出错误：

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

关注点：

• document.createStyleSheet

  的文档说明，如果页面上的样式表超过31个，则会抛出错误，但（1）这是另一个错误，（2）页面上只有10个外部样式表
• 我在谷歌上搜索错误时发现了许多死胡同，唯一一个表明与样式表相关的是，但它指的是内联样式的字符限制，而不是与外部样式相关的问题
• 同样的代码，甚至是

  createStyleSheet

  调用，也适用于IE中的其他站点

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

我刚刚试过这个

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

及

来自amazon.com上的IE，两人都成功了。 也许你需要加上这个！确保css中的某些项现在生效对它们很重要吗

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

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

---

希望它能帮助你。

这就是我所做的一切，而且我从未见过它不起作用

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);
};

---

我使用jQuery做了类似的事情，发现我必须按以下顺序进行：

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

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

---

HTH

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

知识库文档中描述了最初的限制（仅在IE8及以下版本中提供，但在IE9中反复报告）：

---

它在主页上起作用，但在这里不起作用：是的-这是我们使用的代码，它在除亚马逊产品页面外的任何地方都有效：(

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