継承されたスタイルに対して `this.style[property]` が空の文字列を返すのはなぜですか?

this.style[property] の空の文字列戻りについて理解する

HTML 要素の style プロパティにアクセスする場合、構文 this.style[property] を使用します。要素自体に直接適用されたスタイルのみを返すことに注意することが重要です。外部スタイルシートから継承されたスタイル、またはカスケード ルールから計算されたスタイルは含まれません。

提供されたコード スニペット内:

function css(prop, value) {
  if (value == null) {
    // retrieve style
    return this.style[prop]; // returns an empty string
  }
  // set style
}

element.css("height") を呼び出すと、空の文字列が返されます。高さのスタイルは外部スタイルシートで定義されます。要素に適用されるインライン スタイル (背景: #CCC) はここでは関係ありません。

計算されたスタイル情報を取得する方法

継承または計算されたものを含む、スタイルの有効な値を取得するには、 getComputedStyle() 関数を使用します:

const style = getComputedStyle(element);
console.log(style.height); // returns "100px"

以上が継承されたスタイルに対して `this.style[property]` が空の文字列を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。