内联样式是 CSSOM 还是 DOM 的一部分吗？

Question

我试图了解 Web 文档中内联样式和 CSS 对象模型 (CSSOM) 之间的关系。具体来说，我想知道直接应用于元素的内联样式（通过 HTML

style

属性或 JavaScript 的

element.style

）是否是 CSSOM 的一部分或由 DOM 处理。

内联样式直接应用于元素，如下所示：

<div style="color: blue; font-size: 20px;">This text is styled with inline CSS.</div>

或使用 JavaScript：

const element = document.getElementById("myElement");
element.style.color = "blue";
element.style.fontSize = "20px";

我的问题是：

• 这些内联样式是成为 CSSOM 的一部分还是单独存储在 DOM 中？
• 内联样式可以通过 CSSOM API（如

  document.styleSheets

  ）访问，还是只能通过元素的

  style

  属性访问？
• 是否有任何权威来源（规范、文档）可以清楚地解释这种区别？

我的理解是：

• 内联样式不包含在 CCSOM 中。
• CSSOM 确实包含所有外部样式表 (

  <link>

  )、内部样式（

  <style>

  标签）中包含的所有 CSS 规则以及使用 JavaScript 动态添加的规则（例如，

  insertRule()

  ）。它不会过滤掉它们，也没有责任以最高优先级选出获胜者。它只是将所有相应的 css 属性附加到适当的树节点，甚至是冲突的节点。
• 浏览器应用级联规则时会考虑 DOM 和 CSSOM。每个 css 属性和每个元素的最终计算值是仅属于 DOM 且 CSSOM 不知道的知识。

你觉得我是错还是对？我看到了相互矛盾的解释，如果可能的话，我想得到一个带有参考文献的具体答案。任何有关内联样式是否被正式视为 CSSOM 的一部分或仅有助于计算样式的澄清都会有所帮助。

Answer 1

style

属性的

规范清楚地列出了

style

IDL 属性在 CSS 对象模型 中定义。 [CSSOM]

可以在第7章DOM访问CSS声明块中找到。