Специфика CSS, когда Javascript изменяет CSS?

Question

Какова специфика CSS, когда Javascript изменяет CSS?

Например:

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

Считается ли это встроенным стилем?

Answer 1

Специфичность CSS, когда Javascript изменяет CSS?

Точно так же, как если бы вы изменили CSS, изменив исходный исходный код вместо использования JS.

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

В этом случае вы изменяете стили, прикрепленные непосредственно к элементу.

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

Так что максимальная специфичность.( count 1, если объявление от - это атрибут 'style', а не правило с селектором )

Если вы использовали JS для , измените набор правил ,тогда специфичность была бы другой.

Answer 2

Свойство style на узлах DOM по сути является аксессором / мутатором для атрибута style для этих узлов DOM.

Для целей этого ответа рассмотрим node.style.color = 'red' как эквивалентное node.setAttribute(node.getAttribute('style') + ' color: red')*.

С этим вопрос можно перефразировать как

Какова специфика CSS правил в атрибуте style?

ИтакКонечно, ответ заключается в том, что спецификация определяет это поведение

Специфика селектора рассчитывается следующим образом:

...

Примечание: специфика стилей, указанных в атрибуте стиля HTML, описана в CSS 2.1. [CSS21] .

_{Да, я слышал, вам понравились спецификации}

Из CSS 2.1:

Специфичность селектора рассчитывается следующим образом:

• count 1, если декларация from является атрибутом 'style', а не правилом сселектор , 0 в противном случае (= a) (В HTML значения атрибута «style» элемента являются правилами таблицы стилей. Эти правила не имеют селекторов, поэтому a = 1, b = 0, c = 0 и d =0.)
• подсчитать количество атрибутов ID в селекторе (= b)
• подсчитать количество других атрибутов и псевдоклассов в селекторе (= c)
• подсчитать количество имен элементов и псевдоэлементов в селекторе (= d)

_{выделение шахты}

Таким образом, фактическая расчетная специфичностьdocument.getElementById("demo").style.color = "red"; is 1,0,0,0

---

_{* Это, конечно, игнорирование существующих правил в style.}

Answer 3

С помощью JavaScript вы изменяете дерево DOM (Html-файл), а не файл CSS, следовательно, это встроенное моделирование.

Обычно встроенное моделирование таким способом не воспринимается как встроенное моделирование статического HTML-документа.