javascript - 样式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;}";

score 7 · Accepted Answer

作为一个粗略的直观经验法则，注意它innerHTML旨在与HTML一起使用可能很有用，但您正在将它应用于CSS。如果您尝试script使用innerHTML.

动态修改样式规则集的更好接口是document.styleSheets. W3 Consortium 在此处对此进行了有用的概述。

score 0 · Accepted Answer

这很有趣。

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

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

2 回答 2