如何在 IE 中更改 cssText？答案

【问题标题】：How can I change cssText in IE?如何在 IE 中更改 cssText？
【发布时间】：2012-06-11 18:23:36
【问题描述】：

过去，我可以通过内联样式标签修改页面上的 CSS。我知道这听起来很可怕，但它适用于自定义 CSS 编写，同时使用一种所见即所得（虽然不是文本）。

我曾经做过类似的事情： tag.styleSheet.cssText = myrules;

我不知道确切的时间，但是当我尝试这个时，IE 在某些时候开始说“无效参数”。真正的症结在于，执行tag.innerHTML = 'body {}' 会得到Unable to set value of the property 'innerHTML': object is null or undefined，这在任何其他浏览器中都不会发生。

编辑

为了清楚，我使用的是内联样式标签。我没有尝试使用内联样式属性。

<style type="text/css" id="mytag"></style>

如何更改该标签的内部？

编辑 2 请看这个小提琴：

http://jsfiddle.net/tTr5d/

看来我的 tag.styleSheet.cssText 解决方案与使用 styleSheets 属性相同。您可以注释掉 cssText 的最后一个定义，以查看它是否按照@Teemu 的建议工作。所以现在我真的迷失了为什么它在我的应用程序中不起作用。如果有人有想法可以破坏该功能，那就太好了。与此同时，我将修改我的应用程序。

【问题讨论】：

重复stackoverflow.com/questions/4232557/…
@SupremeDud 我在我的文档中尝试了styleSheet.addRule( 'body', 'background-color:#FF0000' );，它只返回了一个数字，每个添加的规则一个，但我没有看到 CSS 更新视觉。当然，我将直接进入工作表而不是使用 styleSheets，我知道这是一个函数
@SupremeDud 看到我的答案非常不同。

标签： javascript css internet-explorer

【解决方案1】：

IE 限制为 32 个样式表。我显然喜欢忘记这个事实，它似乎包括内联样式标签，位于 <link> 之上。

我更改了我的沙箱以打开缩小功能，以便将文件放在一起。

然后我的代码工作了。

所以看来，当你超过限制并通过 JS 插入时，除非你尝试我所做的，否则你不会得到真正的错误。

【讨论】：

+1 - 你让我开心，伙计 ;) 谢谢，我花了整个上午寻找解决方案，直到找到你的答案。
我也一直忘记这一点，并不断回到 SO 来提醒我，如果 IE (a) 没有像 1996 年那样施加这个限制，并且 (b) 实际上给出了一条错误消息，指出了实际问题的原因，而不是含糊其辞，尤其是当他们知道错误的确切原因时。再次感谢！

【解决方案2】：

您只能通过styleSheets 集合（或imports 集合）获取对styleSheet 对象的引用。如果您直接引用style 元素，您只会得到一个HTML 元素。（在简单的for..in-loop 中检查两个对象的属性，看看区别）

这适用于所有 IE，并立即呈现结果：

document.styleSheets['mytag'].addRule('BODY', 'background-color:red');

更多信息MSDN: styleSheet object

【讨论】：

嗯...看来我的回答有一部分是错误的。您的代码确实适用于动态创建的样式表，但是当它们按字面意思写在head 中时，它会失败。为什么会这样，不幸的是我不知道答案。
天哪，这是一个很好的区别。我认为它们总是动态创建的。现在我要检查标签是否在我不知道的情况下被另一个开发人员放入 HTML 中（或者我忘记了它，因为它是很久以前的）
我忙于其他任务，终于有机会看看。这些标签总是动态创建的。

【解决方案3】：

您可以使用 jQuery。如果是内联样式，可以使用.attr()函数。

$("#myElement").attr('style')

否则，您可以查看.css() 提供的内容。您可以使用它来获取和设置各种 CSS 样式。

Other CSS related jQuery methods

【讨论】：

我正在使用像<style type="text/css">.myelements { ... }</style> 这样的内联样式标签，我构建了一个样式表，然后将其保存起来，以便以后在用户不编辑时使用

【解决方案4】：

在样式元素和 IE 的 innerHTML 方面，我从来没有太多的运气。 dom方法更可靠，即使你需要为IE分支；

没有 jquery-

function addNewStyle(str, title){
    var el= document.createElement('style');
    if(title) el.title= title;
    if(el.styleSheet) el.styleSheet.cssText= str;
    else el.appendChild(document.createTextNode(str));
    document.getElementsByTagName('head')[0].appendChild(el);
    return el;
}

【讨论】：

我仍然收到 cssText 的错误，即使我在附加之前使用它