它是如何工作的 element.style["background-color"]答案

【问题标题】：how does it work element.style["background-color"]它是如何工作的 element.style["background-color"]
【发布时间】：2021-06-13 17:19:51
【问题描述】：

element.style 对象中没有属性名称。但是当我们通过括号符号到达它时，它会返回字符串值。

例如

Object.keys(document.body.style).includes("background-color") //false

但是

document.body.style["background-color"] // returns ""

那么这个机制是如何工作的呢？

【问题讨论】：

这能回答你的问题吗？ how to get true css property names from CSSStyleDeclaration object?
@HarunYilmaz 实际上并没有。我想知道是否有一种特殊的 getter 机制适用于任何属性名称。
嗨。也许你想看看这个 API 文档：developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration（我不确定它使用哪种 getter 机制，顺便说一句）
@HarunYilmaz 我在你的 MDN 链接中找到了这个链接“CSSStyleDeclaration named properties”，但它没有给出任何解释。

【解决方案1】：

从 ECMAScript6 开始，您可以使用 Proxy 机制来覆盖 get 操作。

【讨论】：

【解决方案2】：

不同之处在于Object.keys 返回对象的自己的 属性。所以background-color 是一个继承的属性。您可以在MDN web docs 上查看更多信息。

【讨论】：

继承自哪里。我在继承链中找不到它
Object.keys只显示自己的属性并不代表background-color被继承了，这里不是这样。
如果您尝试console.log 样式对象，您会看到该属性名为backgroundColor。因此，我猜它使用了一种 getter 机制，将属性名称从 kebab-case 转换为 camelCase，这与继承无关。
@HarunYilmaz 我同意你的看法，但是。它使用代理吗？