3

これは、少なくとも 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ますが、プロパティ値アクセスだとオブジェクトのプロパティ値へのアクセス方法のルールに反します。JS オブジェクトはこのように動作しますか?

4

1 に答える 1

1

その動作を単独で確認するために必要な魔法はありませんObject.keys。独自の列挙可能な文字列名のプロパティのみを返します。任意の JS オブジェクトは、"background-color"いずれかを指定することで、そのように動作できます。

  1. プロトタイプチェーンの上位、または
  2. 列挙不可能。

前者は"background-color"、計算されたスタイルのプロトタイプの getter/setter ペアである現在の Firefox に当てはまります。

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

Chrome は魔法を使っているようです。ハイフンでつながれたエイリアスは、列挙されていない列挙可能なプロパティです。

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"));

于 2020-01-07T06:35:54.480 に答える