8

如果我使用 CSSOM 添加样式，insertRule我会注意到两件事。

在 Firebug 中查看时，添加的样式不会出现在 html 中。

如果样式标签被附加（例如：从头部移动到正文）到另一个元素（在 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>html 中，您可以使用 应用样式style.sheet.insertRule(styleString)，并且添加的样式将应用于文档。

如果您已经将其附加<style></style>到<head></head>like <head><style></style></head>，并尝试附加<style></style>到其他地方，就像<div><style></style></div>所有样式都丢失一样，请不要再次应用。

这是正常的吗？

代码流程：

作品：

  1. 追加<style>任何地方
  2. 添加样式style.sheet.insertRule(styleString)

不起作用：

  1. 追加<style>任何地方
  2. style.sheet.insertRule(styleString)用to添加样式<style>
  3. <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>

4

1 回答 1

8

这是因为元素仅在附加到文档<style>时才具有属性。 因此，当您移动它或将其从文档中删除时，它们的属性将设置回. 您使用该方法应用到它的每个规则都将消失，因为它们不在's中。sheet
sheetnullinsertRule<style>innerHTML

规格的相关部分：

CSS ( )的更新style块算法text/css如下：

  1. 让 element 成为样式元素。

  2. 如果元素具有关联的 CSS 样式表，请删除有问题的 CSS 样式表。

  3. 如果元素不在文档中，则中止这些步骤。

  4. 如果内容安全策略阻止了 Should 元素的内联行为 [...]，则中止这些步骤。[CSP]

  5. 创建具有以下属性的 CSS 样式表： ...

如您所见，每次<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)

于 2016-04-20T04:45:31.600 回答