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

element.style が空を返す理由を理解する

JavaScript では、element.style プロパティは通常、要素に直接適用されたインライン スタイル属性を返します。 HTMLドキュメント内で。ただし、インライン スタイルは、コードの不整合や保守性の問題が発生する可能性があるため、要素のスタイリングには推奨されません。

ただし、外部 CSS ファイルでスタイルを明示的に定義し、それらのスタイルにアクセスしようとすると、問題が発生します。 element.style を使用したスタイル。この場合、element.style は常に空のオブジェクトを返すため、困惑することになります。

インライン スタイルと計算されたスタイル

この動作を理解するには、次の点を理解することが重要です。インライン スタイルと計算されたスタイルの区別。インライン スタイルは、HTML ドキュメント内の要素に直接適用されるスタイル属性を指しますが、計算されたスタイルは、インライン スタイル、CSS スタイルシート、ユーザー エージェント スタイルなど、該当するすべてのソースからの該当するすべてのスタイルの組み合わせを表します。

JavaScript は CSS スタイルを直接読み取ることができない

JavaScript 自体には、CSS スタイルを読み取る機能がありません。 CSS スタイルを直接指定します。代わりに、CSS のカスケード ルールに基づいて計算されたスタイルを計算するブラウザのレンダリング エンジンに依存します。

したがって、element.style にアクセスすると、element.style には存在しないインライン スタイルにのみアクセスすることになります。外部 CSS ファイルでスタイルを指定した場合の例です。インライン CSS スタイルと外部 CSS スタイルの両方を含む計算されたスタイルを取得するには、window.getComputedStyle(element) 関数を使用する必要があります。

解決策: getComputedStyle を使用する

あなたのシナリオでは、getComputedStyle 関数は必要な値を提供します。 result:

console.log(window.getComputedStyle(document.getElementById('test')).display);

このコード行は、element.style.display が空の文字列を返す場合でも、CSS ファイルで定義されているとおりに表示プロパティの値を記録します。

したがって、重要なポイントは、element.style はインライン スタイルに固有であるのに対し、window.getComputedStyle はインラインと外部の両方の CSS スタイルへのアクセスを提供するということです。これは、スタイルを正確に取得するために必要なものです。情報。

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