为 <style> 设置 innerHTML 值在 IE7 中不起作用答案

【问题标题】：setting innerHTML value for <style> does not work in IE7为 <style> 设置 innerHTML 值在 IE7 中不起作用
【发布时间】：2015-12-11 15:21:09
【问题描述】：

我正在寻找一种使用 Javascript 将样式动态附加到样式表的方法。

在当今的浏览器中，我可以这样使用：

<style>
#id{background-color:#F00;color:#000;}
</style>
<div ID="id">Test1</div>
<div ID="id2">Test</div>
<script>
document.getElementById('ID').innerHTML+="#id2{color:#00F}";
</script>

由于 javascript，上述代码会将 Test 的颜色从黑色变为蓝色，但此代码不适用于 Internet Explorer 7 等旧版浏览器。

在 Internet Explorer 7 中，我将问题缩小到这样一个事实，即当它应该设置样式元素的 innerHTML 值时，它会在左下角产生一个 javascript 警告符号。

我尝试替换：

document.getElementById('ID').innerHTML+="#id2{color:#00F}";

与：

document.getElementById('ID').appendChild(document.createTextNode("#id2{color:#00F}"));

我还是没有成功。

为此我需要 javascript，因为我想一次为多个元素设置背景图像，并且通过在 CSS 代码中进行撞击，我只能调用一次图像。如果我对每个元素都使用原生 javascript 属性，那么我会遍历大量元素并多次请求加载相同元素，如果 IE 缓存不好，那么负担将放在服务器上。

我可以在 Javascript 中执行哪些操作以将 CSS 数据附加到适用于 IE 7 的样式元素？我正在寻找简单的东西。

【问题讨论】：

看看这个：davidwalsh.name/add-rules-stylesheets
我尝试了您文章中的 insertRule 想法，发现它仅适用于 IE 9+。 IE 7 报告 javascript 错误 Error: 'sheet' is not an object
如果我没记错的话，IE7 中的style 标签应该放在head 部分。更改 innerHTML 或 innerText 会影响 CSS。尽管在页面上看到结果之前需要页面重排。您是在真正的 IE7 中运行，还是只是用较新的版本来模拟它？另外，错误信息是什么？
我实际上是在 Windows XP 上的真实 IE 7 中进行测试。并且将 style 元素放在 head 元素中是正确的，但是由于 IE 7 存在的错误，我的技巧奏效了。

标签： css internet-explorer text internet-explorer-7 innerhtml

【解决方案1】：

好吧，我回到了过去，并设法在 IE 7 中实现了这一点：

document.write('<style>'+d+'</style>');

变量 d 是要插入的实际规则。

我知道这是一种较慢的方法，因为它会创建大量的 <style> 标签，这是不好的 HTML 做法，但这个想法在 IE7 中有效。

【讨论】：