JavaScript で「this.style[property]」が空の文字列を返すのはなぜですか?

JavaScript this.style[property] 空の文字列を返す: 明確化

this.style[property] は主に適用されたインライン スタイルを取得します要素に直接アクセスすると、空の文字列が取得される場合があります。これは、問題のプロパティが要素のインライン スタイルで明示的に設定されていない場合に発生します。

提供されたコード スニペットでは、

function css(prop, value) {
  if (value == null) {
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

element.css("height") を呼び出すときに、インラインの高さプロパティにアクセスしようとしています。ただし、提供されている HTML では:

<div>

インラインの高さプロパティは定義されていません。したがって、 this.style["height"] は空の文字列を返します。

外部またはインライン スタイルシートからのカスケード スタイルを含む計算された高さを取得するには、getComputedStyle() メソッドを使用できます。

const element = document.getElementById("test");
const style = getComputedStyle(element);
const height = style.height;

この場合、高さは「100px」になります。

最初のコードの問題を解決するには、次のようにします。 css 関数を次のように変更できます:

function css(prop, value) {
  if (value == null) {
    const b = (window.navigator.userAgent).toLowerCase();
    let s;
    if (/msie|opera/.test(b)) {
      s = this.currentStyle;
    } else if (/gecko/.test(b)) {
      s = document.defaultView.getComputedStyle(this, null);
    }
    if (s[prop] != undefined) {
      return s[prop];
    }
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

この変更により、関数は計算されたスタイルもチェックするようになるため、element.css("height") は "100px" を返します。

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