如果我使用 insertRule 通过 CSSOM 添加样式我注意到两件事。
在 Firebug 中查看时，添加的样式不会出现在 html 中。
如果样式标签被附加(例如:从头部移动到 body )到另一个元素(发生在 Firefox 和 Chrome 中)，则添加的样式不起作用。
如果样式是在附加标签之后添加的，那么它们就可以工作。它们仍然没有显示在 Firebug 中。附加工作表时必须重新分配(重新获取？)这使得它看起来更奇怪。
对于在 Firebug 中不显示这可能是 Firebug 的一个怪癖，但未动态添加的常规样式会显示。
对于在附加后不起作用的样式，我想知道这是否是标准，因为这发生在 Firefox 和 Chrome 中。查看标准，我没有看到任何关于此的内容。除非我不理解它们。
var style = document.createElement('style'),
sheet = style.sheet;
document.head.appendChild(style);
//When line 6 is un-commented the styles work
//if line 8 is also commented out.
//document.querySelector('.container').appendChild(style);
//Get the sheet when line 6 is un-commented
sheet = style.sheet
sheet.insertRule('.test{color: red}');
document.querySelector('.container').appendChild(style);
//styles don't apply after the previous line
为清楚起见编辑:
如果您附加 <style></style>标记到 <head></head>您可以使用 style.sheet.insertRule(styleString) 应用样式的 html , 添加的样式将应用于文档。
如果您已经附加了 <style></style>到 <head></head>喜欢<head><style></style></head> , 并尝试附加 <style></style>其他地方，比如 <div><style></style></div>样式全部丢失，请勿再次应用。
这正常吗？
代码流程:
作品:
- 追加
<style>任何地方 - 使用
style.sheet.insertRule(styleString)添加样式
不起作用:
- 追加
<style>任何地方 - 使用
style.sheet.insertRule(styleString)添加样式至<style> - 附加相同的
<style>别处
我的另一个问题是添加到 <style></style> 的样式不要出现在 Firebug 中即使他们已经申请了文件。
编辑更清晰:
如果我重新附加 style元素没有修改样式表，样式保持不变:
var style = document.querySelector('style');
document.head.appendChild(style);* {color: red}<p>Hello world</p>但是如果我用 JS 更改了样式表，更改将被撤消:
var style = document.querySelector('style'),
sheet = style.sheet;
sheet.insertRule('* {color: red}', 0);
document.head.appendChild(style); //Comment this line out, and this works./* CSS rules will be inserted with JS */<p>Hello world</p>最佳答案
这是因为<style>元素只有一个 sheet附加到文档时的属性。
因此，当您移动它或将其从文档中删除时，它们的 sheet属性设置回 null .您使用 insertRule 应用于它的每条规则方法将消失，因为它们不在 <style> 中的 innerHTML .
the specs的相关部分:
The update a
styleblock algorithm for CSS (text/css) is as follows:
Let element be the style element.
If element has an associated CSS style sheet, remove the CSS style sheet in question.
If element is not in a Document, then abort these steps.
If the Should element's inline behavior be blocked by Content Security Policy [...] then abort these steps. [CSP]
Create a CSS style sheet with the following properties: ...
如您所见，每次 <style>元素更新后，将创建一个新的 CSS 样式表(仅当 .3 和 .4 未阻止该过程时)。
小演示:
var style = document.createElement('style');
console.log('before being appended : '+ style.sheet)
document.body.appendChild(style);
console.log('after being appended : '+ style.sheet)
document.body.removeChild(style);
console.log('after being removed : '+ style.sheet)关于javascript - 为什么使用CSSOM的insertRule后样式不可见，样式标签不能重新追加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36638076/