javascript 样式内部HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18751498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style innerHTML
提问by Christophe
I am trying to understand the behavior of style tags when used with innerHTML.
我试图了解与 innerHTML 一起使用时样式标签的行为。
I did 3 experiments:
我做了3个实验：
Style with existing rule, innerHTML inserts other selector rule
样式与现有规则，innerHTML 插入其他选择器规则
Result: both rules apply. Demo: http://jsfiddle.net/Tcy3B/
结果：两个规则都适用。演示：http: //jsfiddle.net/Tcy3B/
Style with existing rule, innerHTML inserts same selector rule
样式与现有规则，innerHTML 插入相同的选择器规则
Result: the new rule is ignored. Demo: http://jsfiddle.net/Tcy3B/1/
结果：新规则被忽略。演示：http: //jsfiddle.net/Tcy3B/1/
Empty style, innerHTML inserts a rule, then another innerHTML inserts another rule
空样式，innerHTML插入一条规则，然后另一个innerHTML插入另一条规则
Result: the second rule overwrites the first one. Demo: http://jsfiddle.net/Tcy3B/2/
结果：第二条规则覆盖第一条规则。演示：http: //jsfiddle.net/Tcy3B/2/
Could anybody explain the logic? This looks totally random to me, sometimes the second rule is added to the first one, sometimes it is ignored, and sometimes it overwrites the first one.
有人能解释一下逻辑吗？这对我来说看起来完全随机，有时第二条规则被添加到第一个规则，有时它被忽略，有时它会覆盖第一个规则。
Background: the idea is to build dynamic UIs that rely on css rather than JavaScript, as illustrated in this full text search example.
背景：这个想法是构建依赖于 css 而不是 JavaScript 的动态 UI，如本全文搜索示例所示。
As an example, here is the code of the second demo:
例如，这里是第二个演示的代码：
html:
html：
<style type="text/css">
.red {color:red;}
</style>
<div class="red">red</div>
<div class="blue">blue</div>
JavaScript:
JavaScript：
var st=document.getElementsByTagName("style")[0];
st.innerHTML=".red {color:blue;}";
回答by dig
As a crude intuitive rule-of-thumb, it may be useful to note that innerHTMLis intended to work with HTML, but you're applying it on CSS. You might expect to encounter similar "funny" problems if you tried to modify scriptelements using innerHTML.
作为一个粗略直观的经验法则，注意到它innerHTML旨在与HTML一起使用可能很有用，但您将它应用于CSS。如果您尝试script使用innerHTML.
A better interface for dynamically modifying the styling rulesets would be document.styleSheets. The W3 Consortium has a useful overview on this here.
动态修改样式规则集的更好界面是document.styleSheets. W3 Consortium 在此处对此进行了有用的概述 。
回答by Erik Christianson
This is pretty interesting.
这很有趣。
It almost seems like when you have a style already loaded in the <style></style>tags it preserves it after you write to the .innerHTMLof the <style>tag. However, each time you write to the .innerHTMLit overwrites the whole thing. if in your third example you use +=like as shown below, it should add both styles:
这看起来几乎是当你已经装在一个风格类似<style></style>它保留了它的标签，你写后.innerHTML的的<style>标签。但是，每次写入时，.innerHTML它都会覆盖整个内容。如果在第三个示例中使用+=如下所示，它应该添加两种样式：
var st=document.getElementsByTagName("style")[0];
st.innerHTML = ".red {color:red;}";
st.innerHTML += ".blue {color:blue;}";
