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

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

JavaScript プログラムで「this.style」にアクセスすると、 [プロパティ]' プロパティは空の文字列になる場合があります。これは、CSS スタイルシートに設定されたスタイルの値を取得しようとしたときに発生する可能性があります。

「this.style[property]」プロパティは、直接設定されるスタイルであるインライン スタイルにアクセスするように設計されています。 「style」属性を使用して HTML 要素に追加します。外部または埋め込み CSS スタイルシートで定義されたスタイルはフェッチしません。

これを解決するには、getComputedStyle() 関数を使用します。この関数は、スタイルシートで定義されたスタイルを含む、要素の結合スタイルを計算します。

const element = document.getElementById('myId');
const style = getComputedStyle(element);
console.log(style.height); // "100px"

この例では、「getComputedStyle()」関数を使用して要素の「高さ」プロパティを取得します。コンソールは、スタイルシートで定義された高さを表す値「100px」を出力します。

したがって、「this.style[property]」は、インライン スタイルにアクセスするのには便利ですが、定義されたスタイルを取得するのには適していません。 CSS スタイルシートで。 「getComputedStyle()」を利用して、すべてのソースを含む要素の有効なスタイルを取得します。

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