css - 为 <style> 设置 innerHTML 值在 IE7 中不起作用

Question

我正在寻找一种使用 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 代码，我只能调用一次图片。如果我为每个元素使用 native javascript 属性，那么我将遍历大量元素并多次请求加载同一元素，如果 IE 的缓存不好，那么负担就会落在服务器上。

如何在 Javascript 中将 CSS 数据附加到适用于 IE 7 的样式元素？我正在寻找简单的东西。

Answer 1

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

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

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

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