CSS スタイルが別のファイルで定義されている場合、「element.style」が空の値を返すのはなぜですか?

JavaScript の CSS スタイル プロパティを理解する

JavaScript で CSS スタイル プロパティを参照する場合、開発者は、element.style が空を返すという予期せぬ問題に遭遇することがよくあります。 CSS ファイルでスタイルを定義しているにもかかわらず、値は無視されます。この記事の目的は、この動作に光を当て、それが発生する理由を説明することです。

インライン スタイルと計算スタイルの違い

JavaScript の element.style プロパティは、インライン スタイルへのアクセスを提供します。 HTML 要素内で直接定義されます。ただし、CSS スタイルが CSS ファイル内で個別に定義されている場合、それらはインライン スタイルとは見なされません。代わりに、それらは計算されたスタイルになります。

計算されたスタイル: 適用された値

計算されたスタイルは、すべての継承されたスタイル、CSS ルールを考慮した後に要素に適用される実際のスタイル プロパティを表します。 、およびブラウザのデフォルト値。 JavaScript で計算されたスタイルにアクセスするには、getComputedStyle() 関数を使用します。

空の element.style 値の説明

element.style はインライン スタイルのみを保持します。 CSS スタイルはインラインで定義されていないため、element.style からはアクセスできず、空の値が返されます。

例:

<div>

#test {
  display: block;
}

console.log(document.getElementById('test').style.display); // Returns ""

getComputedStyle を使用して計算結果を取得するスタイル

CSS で定義されているものを含む、適用されたスタイル プロパティを取得するには、getComputedStyle():

console.log(window.getComputedStyle(document.getElementById('test')).display); // Returns "block"

を使用します。

以上がCSS スタイルが別のファイルで定義されている場合、「element.style」が空の値を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。