Почему window.getComputedStyle () возвращает объект с именем свойства "backgroundColor", но использование имени свойства "background-color" также работает?

Question

Это верно, по крайней мере, в Chrome и Firefox:

Object.keys(getComputedStyle(document.body)).includes("backgroundColor")  // => true
Object.keys(getComputedStyle(document.body)).includes("background-color") // => false

,

getComputedStyle(document.body)["background-color"]    // "rgb(255, 255, 255)"
getComputedStyle(document.body)["backgroundColor"]     // "rgb(255, 255, 255)"

Так что, если background-color не является ключом, как можно

getComputedStyle(document.body)["background-color"]

показать что-нибудь? Я знаю, что в jQuery, fontSize совпадает с font-size и т. Д. c, но если это доступ к значению свойства, это противоречит правилу доступа к значению свойства объекта. Может ли любой JS объект вести себя так?

Answer 1

Маги c не нужны, чтобы видеть только это поведение: Object.keys возвращает только собственные, перечисляемые свойства со строковыми именами. Любой объект JS может вести себя так, имея "background-color" либо

1. выше в цепочке прототипов, либо
2. не перечисляемый.

Первое справедливо для "background-color" для текущего Firefox, где это пара геттер / установщик для прототипа вычисляемого стиля:

console.log("background-color" in getComputedStyle(document.body));
console.log(
    Object.getOwnPropertyDescriptor(CSS2Properties.prototype, "background-color"));

Chrome, кажется, использует маги c, где псевдонимы-дефисы являются перечислимыми свойствами, которые не перечислены.

for (let prop in document.body.style) {
  if (prop === "background-color") {
    console.log("found it");
  }
}

console.log(Object.getOwnPropertyDescriptor(document.body.style, "background-color"));

Объекты, не являющиеся хостами, в частности прокси-серверы, все еще могут вести себя так же.

const magic = new Proxy({
  "background-color": "red",
}, {
  ownKeys(target) {
    return [];
  },
});

console.log(Object.keys(magic));
console.log(Object.getOwnPropertyDescriptor(magic, "background-color"));