Why window.getComputedStyle() returns an object with a property name "backgroundColor" but using a property name "background-color" also works?

Question

This is true at least in Chrome and Firefox:

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

yet,

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

So if background-color is not a key, how can

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

show something? I know in jQuery, fontSize is the same as font-size, etc, but if it is property value access it is against the rule of how to access the property value of an object. Can any JS object behave like this?

Answer 1

There’s no magic necessary to see that behaviour alone: Object.keys only returns own, enumerable, string-named properties. Any JS object can behave like that by having "background-color" either be

1. higher on the prototype chain, or
2. non-enumerable.

The former is true of "background-color" on current Firefox, where it’s a getter/setter pair on the prototype of the computed style:

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

Chrome seems to use magic, where hyphenated aliases are enumerable properties that aren’t enumerated.

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

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

Non-host objects – proxies, specifically – can still behave like that, though.

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

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