关于CSSStyleDeclaration对象的底层实现与属性同步疑问

我正在研究DOM元素上的style属性（即element.style，属于CSSStyleDeclaration的实例）的行为。已知element.style用于访问元素的内联样式，且能动态反映style属性的变化，但对以下行为存在疑惑：

当使用Object.getOwnPropertyNames查看element.style时，会返回大量对应所有CSS属性的自有属性，示例代码如下：

const div = document.createElement('div');
console.log(Object.getOwnPropertyNames(div.style));

输出结果包含color、backgroundColor等众多属性名。我有两个问题：

1. 这是否意味着div.style直接在对象上存储状态，而不像div.nodeType（位于Node.prototype中的getter）那样通过浏览器原生环境获取值？
2. 若这些属性定义在对象上，CSSStyleDeclaration如何实现内联style属性与这些属性的同步？

我希望深入了解CSSStyleDeclaration的底层实现，寻求可靠解答及参考资料。

问题解答 #

1. 自有属性的本质：实例绑定的访问器，而非直接存储状态 #

Object.getOwnPropertyNames返回的CSS属性名，是直接定义在CSSStyleDeclaration实例自身上的访问器属性（getter/setter），和div.nodeType这类原型链上的访问器不同，但这并不代表状态直接存在于这些属性中。

当你读取element.style.color时，底层依然是从浏览器维护的内联样式状态池中获取对应值；写入时则是修改这个状态池，而非直接在实例属性上存储值。

2. 双向同步的实现逻辑 #

CSSStyleDeclaration的同步由浏览器DOM渲染引擎内部维护：

• 实例属性 → style属性字符串：修改element.style.color这类属性时，对应的setter会触发浏览器更新内部样式状态，随后引擎将所有生效的内联样式序列化，更新到元素的style属性字符串中。
• style属性字符串 → 实例属性：直接修改元素的style属性（如div.setAttribute('style', 'color: blue')）后，浏览器会解析字符串并更新内部状态池，当读取element.style.color时，getter会从状态池取出最新值返回。

整个同步过程由浏览器原生引擎自动完成，保证内联样式状态的一致性。

参考资料方向 #

• W3C CSSOM规范：明确定义了CSSStyleDeclaration的接口、属性行为及同步逻辑
• 浏览器引擎源码：比如Chromium的Blink引擎中关于CSSStyleDeclaration的实现代码，可直观查看访问器定义与状态同步机制

内容的提问来源于stack exchange，提问作者Unknown developer