Javascript修改CSS时的CSS特异性？答案

【问题标题】：CSS specificity when Javascript modifies CSS?Javascript修改CSS时的CSS特异性？
【发布时间】：2019-02-12 16:32:38
【问题描述】：

Javascript 修改 CSS 时的 CSS 特性是什么？

如：

document.getElementById("demo").style.color = "red";

它被认为是内联样式吗？

【问题讨论】：

具体明确#demo
@Kingamere：是的，那是内联样式
@guest271314 — 不，完全错误。
@Quentin CSS 设置在元素style 属性中，该属性具有最大的权重。你能解释一下评论是如何“完全错误”的吗？
@guest271314 — 是的……但比您的评论暗示的 ID 选择器要轻。

标签： javascript css css-specificity

【解决方案1】：

Javascript 修改 CSS 时的 CSS 特异性？

与您通过编辑原始源代码而不是使用 JS 来修改 CSS 完全一样。

document.getElementById("demo").style.color = "red";

在这种情况下，您正在修改直接附加到元素的样式。

<div id="demo" style="color: red">

所以最大的特异性。 (count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector)

如果你曾经用JS来modify a ruleset，那么特异性会不一样。

【讨论】：

【解决方案2】：

DOM 节点上的 style 属性本质上是这些 DOM 节点的 style 属性的访问器/修改器。

出于此答案的目的，请考虑将 node.style.color = 'red' 等同于 node.setAttribute(node.getAttribute('style') + ' color: red')*。

问题可以重新定义为

style 属性中规则的 CSS 特殊性是什么？

所以答案当然是the spec defines this behavior

选择器的特异性计算如下：

...

注意： HTML 样式属性中指定的样式的特殊性在 CSS 2.1 中进行了描述。 [CSS21].

_{老哥，听说你喜欢规格}

From CSS 2.1:

选择器的特异性计算如下：

如果声明来自'style'属性而不是带有选择器的规则，则计数为 1，否则为 0 (= a)（在 HTML 中，元素的“style”属性的值是样式表规则. 这些规则没有选择器，因此 a=1、b=0、c=0 和 d=0。）

统计选择器中 ID 属性的数量 (= b)

统计选择器中其他属性和伪类的数量 (= c)

计算选择器中元素名称和伪元素的数量 (= d)

_强调我的

所以document.getElementById("demo").style.color = "red";的实际计算特异性是1,0,0,0

_{* 这当然是忽略style 中的现有规则。}

【讨论】：

【解决方案3】：

通过 JavaScript，您正在修改 DOM 树（Html 文件）而不是 CSS 文件，因此它是内联样式。

这种方式的内联样式通常不会被视为静态 HTML 文档的内联样式。

【讨论】：