JavaScript で CSS プロパティを取得するときに、`this.style[property]` が空の文字列を返す場合があるのはなぜですか?

JavaScript からスタイル プロパティを取得する

JavaScript で CSS スタイルを扱う場合、this.style[property] が空の文字列。

理解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(property, value) を使用した要素の CSS プロパティ。

ただし、次の例の高さなど、インラインで設定されていないプロパティを取得しようとすると、

<div>
<pre class="brush:php;toolbar:false">const element = document.getElementById('test');
const height = element.css('height'); // Returns ""

この場合、高さはインラインとして定義されていないため、空の文字列が返されます。 style.

解決策

外部スタイルシートで定義されている CSS プロパティにアクセスするには、またはクラスを使用すると、getComputedStyle() 関数を使用できます。この関数は、要素の計算されたスタイルを取得します。これには、要素に適用されているすべてのスタイルが含まれます。

const element = document.getElementById('test');
const height = getComputedStyle(element).height; // Returns "100px"

提供した更新コードでは、getComputedStyle() を使用して計算されたスタイルを取得することで CSS 関数を修正しました。要素の:

function css(prop, value) {
  // Code to get or set CSS properties
  if (value == null) {
    var b = (window.navigator.userAgent).toLowerCase();
    var 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];
  }
  // Code to continue with your logic
}

この更新された関数を使用すると、外部スタイルシートで定義されている CSS プロパティを正しく取得できるようになりました。インライン スタイルとして設定されていない場合でも、クラスを使用します。