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

编程入门行业动态更新时间:2024-10-28 14:28:35

本文介绍了无法以编程方式将CSS添加到IE的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

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

I have a bookmarklet which inserts a CSS stylesheet into the target DOM via a "link" tag (external stylesheet).

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

Recently, this stopped working on Amazon, in Internet Explorer only. It works on other sites, and with other browsers (even on Amazon). The technique we're using to insert the stylesheet is pretty straightforward:

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

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

Where "s" is a link object created with document.createElement. Even on Amazon, I see via the Internet Explorer Developer Toolbar DOM inspector that the element is there. However if I alert the document.styleSheets collection in JavaScript, it's not there.

作为测试，我尝试使用仅IE浏览器 document.createStyleSheet 方法将URL作为参数传递给我的样式表。抛出错误：

As a test, I tried to use the IE-only document.createStyleSheet method passing the URL to my stylesheet as an argument. This throws the error:

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

Not enough storage is available to complete this operation

兴趣点：

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

The documentation for document.createStyleSheet says an error will be thrown if there are more than 31 stylesheets on the page but (1) it's a different error, and (2) there are only 10 external stylesheets on the page.
My googling for the error turned up a number of dead-ends, and the only one that suggested anything stylesheet-related was this drupal post, but it refers to a character limit on inline styles, as opposed to a problem relating to external styles.
The same code, even the createStyleSheet call, works on other sites in IE.

这已经达到了完全神秘的地位。

This has reached "complete mystery" status for me.

推荐答案

我刚试过这个

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

和

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

两者都有效。也许您需要将！important添加到您的css的某些项目以确保它们现在生效？

from IE on amazon and both worked. Maybe you need to add the !important to some items of your css to be sure they take effect now?

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

UPDATE: Found a possible solution for you...

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