我试图理解使用innerHTML时样式标记的行为。
我做了3次实验：
具有现有规则的样式，innerHTML会插入其他选择器规则
结果：两条规则都适用。演示：http://jsfiddle.net/Tcy3B/
使用现有规则的样式，innerHTML会插入相同的选择器规则
结果：忽略新规则。演示：http://jsfiddle.net/Tcy3B/1/
空样式，innerHTML插入规则，然后另一个innerHTML插入另一个规则
结果：第二条规则覆盖第一条规则。演示：http://jsfiddle.net/Tcy3B/2/
有人可以解释这个逻辑吗？这看起来对我来说是完全随机的，有时第二条规则被添加到第一条规则中，有时会被忽略，有时它会覆盖第一条规则。
背景：我们的想法是构建依赖于css而不是JavaScript的动态UI，如full text search example所示。
举个例子，这是第二个演示的代码：
HTML：
<style type="text/css">
.red {color:red;}
</style>
<div class="red">red</div>
<div class="blue">blue</div>
JavaScript的：
var st=document.getElementsByTagName("style")[0];
st.innerHTML=".red {color:blue;}";
答案 0 :(得分：5)
作为一个粗略的直观经验法则，注意innerHTML旨在与 HTML 一起使用可能会很有用，但是您将它应用于 CSS 。如果您尝试使用script修改innerHTML元素，则可能会遇到类似的“有趣”问题。
动态修改样式规则集的更好界面是document.styleSheets。 W3联盟对此here有一个有用的概述。
答案 1 :(得分：0)
这非常有趣。
在您<style></style>标记的.innerHTML标记后，它似乎已经加载了<style>标记中的样式。但是，每次你写.innerHTML它都会覆盖整个事情。如果您在第三个示例中使用+=，如下所示，则应添加两种样式：
var st=document.getElementsByTagName("style")[0];
st.innerHTML = ".red {color:red;}";
st.innerHTML += ".blue {color:blue;}";