样式innerHTML

Posted 2023-05-07

【中文标题】样式innerHTML

【英文标题】：Style innerHTML

【发布时间】：2013-09-16 02:04:08

【问题描述】：

我试图了解样式标签在与 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 所示。

例如，这里是第二个demo的代码：

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

【问题讨论】：

好问题。我也想知道同样的事情。

@Asad 好吧，我的错误也是 :-( 这只是一个 jsfiddle 行为，如果我给样式表一个 id，那么一切都会按预期工作，innerHTML 会覆盖以前的规则。投票结束此事.

@Christophe 是的，这是真的。您可能应该将其发布为答案，因为它解释了正在发生的事情。

【参考方案1】：

作为一个粗略的直观经验法则，注意innerHTML 旨在与 HTML 一起使用可能很有用，但您将其应用于 CSS时间>。如果您尝试使用innerHTML 修改script 元素，您可能会遇到类似的“有趣”问题。

动态修改样式规则集的更好接口是document.styleSheets。 W3 联盟对此here 有一个有用的概述。

【讨论】：

样式元素是html。您引用的链接（为此 +1）在样式元素上使用了诸如 innerHTML 和 getElementById 之类的方法。

【参考方案2】：

这很有趣。

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

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

【讨论】：

同意。但我在评论他的第三个例子。 style 标签中的内容最初似乎被保留了，但在第三个示例中，当您最初没有样式时，一次只添加一个样式，除非您使用 +=，否则它会覆盖它们。 jsfiddle.net/mtr4b/1

已经存在的样式已经被浏览器应用了。