在 IE8 中修改 <style> 元素的 innerHTML

Posted 2023-05-07

【中文标题】在 IE8 中修改 <style> 元素的 innerHTML

【英文标题】：Modifying the innerHTML of a <style> element in IE8

【发布时间】：2011-10-01 16:35:50

【问题描述】：

我正在创建一个样式元素，我需要在其中添加一些 CSS。以下代码在 Chrome、Safari 和 FF 中有效，但在 IE8 中失败：

var styleElement = document.createElement("style");

styleElement.type = "text/css";

styleElement.innerhtml = "bodybackground:red";

document.head.appendChild(styleElement);

在 IE8 中，代码在涉及到 innerHTML 部分时会失败。我试过这样做：

var inner = document.createTextNode("bodybackground:red");

styleElement.appendChild(inner);

但这也因“意外调用方法或属性访问”而失败。 我正在寻找解决方法或修复方法。

【参考方案1】：

使用.styleSheet.cssText

注意：与修改单个元素样式相比，这在 IE8 中似乎真的很慢。

有没有更快的方法在 IE 中动态修改样式表？

这在 IE8 中很慢：

styleElement.styleSheet.cssText = "bodybackground:red";

这在IE8中也很慢（假设要修改的样式对象是头部的第一个样式元素）：

document.styleSheets[0].cssText = "bodybackground:red";

这在 IE8 中很快：

document.body.style.background = "red";

【参考方案2】：

尝试使用styleElement.innerText