CSS Javascript 修改 CSS 时的特异性？

Question

Javascript修饰CSS时CSS的特殊性是什么？

如：

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

它被认为是内联样式吗？

Answer 1

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

一般来说，这种方式的内联样式不会因为静态 HTML 文档中的内联样式而受到反对。

Answer 2

CSS specificity when Javascript modifies 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 3

DOM 节点上的 style 属性本质上是那些 DOM 节点的 style 属性的 accessor/mutator。

为了这个答案的目的，考虑 node.style.color = 'red' 等同于 node.setAttribute(node.getAttribute('style') + ' color: red')*.

这样问题就可以改写为

What is the CSS specificity of rules in a style attribute?

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

A selector's specificity is calculated as follows:

...

Note: the specificity of the styles specified in an HTML style attribute is described in CSS 2.1. [CSS21].

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

From CSS 2.1:

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)

count the number of ID attributes in the selector (= b)

count the number of other attributes and pseudo-classes in the selector (= c)

count the number of element names and pseudo-elements in the selector (= d)

_强调我的

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

_{* 这当然忽略了 style.}

中的现有规则

CSS Javascript 修改 CSS 时的特异性？

CSS specificity when Javascript modifies CSS?

javascript

css

css-specificity