Question

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

例如：

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

它被认为是内联样式吗？

Answer 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，则特异性会有所不同。

Answer 2

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

通常，以这种方式进行的内联样式不会像在静态HTML文档上的内联样式一样被接受。

Answer 3

DOM节点上的style属性本质上是这些DOM节点的style属性的访问者/变量。

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

这样，问题可以改写为

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

因此，答案当然是the spec defines this behavior

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

...


注意：在CSS 2.1中描述了HTML样式属性中指定的样式的特异性。 [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中的现有规则。}

JavaScript修改CSS时CSS的特殊性？

3 个答案: