样式innerHTML

Question

我试图理解样式标签与innerHTML一起使用时的行为.

我做了3个实验:

使用现有规则的样式,innerHTML会插入其他选择器规则

结果:两条规则都适用.演示:http://jsfiddle.net/Tcy3B/

使用现有规则的样式,innerHTML插入相同的选择器规则

结果:忽略新规则.演示:http://jsfiddle.net/Tcy3B/1/

空样式,innerHTML插入规则,然后另一个innerHTML插入另一个规则

结果:第二条规则覆盖第一条规则.演示:http://jsfiddle.net/Tcy3B/2/

任何人都可以解释这个逻辑吗？这对我来说完全是随机的,有时第二条规则被添加到第一条规则中,有时会被忽略,有时它会覆盖第一条规则.

背景:我们的想法是构建依赖于css而不是JavaScript的动态UI,如此全文搜索示例所示.

举个例子,这是第二个演示的代码:

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;}";

Answer 1

作为一个原油直观的原则进行的拇指,可能要注意,有用innerHTML的目的是与工作的HTML,但你将它放在CSS.如果您尝试script使用修改元素,您可能会遇到类似的"有趣"问题innerHTML.

用于动态修改样式规则集的更好界面将是document.styleSheets.在W3联盟对此有一个有用的概述 这里.

Answer 2

这很有趣。

看起来好像当您已经在标签中加载了样式时，<style></style>它会在写入标签后保留.innerHTML它<style>。但是，每次写入时，.innerHTML它都会覆盖整个内容。如果在你的第三个示例中你使用+=如下所示，它应该添加两种样式：

var st=document.getElementsByTagName("style")[0];
st.innerHTML = ".red {color:red;}";
st.innerHTML += ".blue {color:blue;}";