`Element.style` がインライン スタイルシート スタイルとマスター スタイルシート スタイルに対して異なる値を返すのはなぜですか?

Susan Sarandon
リリース: 2024-11-10 21:28:02
オリジナル
828 人が閲覧しました

Why Does `Element.style` Return Different Values for Inline and Master Stylesheet Styles?

マスター スタイルシートの表示スタイル取得の不一致

JavaScript の Element.style プロパティを通じて要素のスタイルにアクセスする場合、潜在的な相違点に注意することが重要です。スタイルの宣言方法に基づいて動作します。

説明されているシナリオでは、初期の display:none スタイルは DIV 要素にインラインで設定されました。ただし、初期スタイルがマスター スタイルシートに移動されると、要素は非表示になりました。興味深いことに、要素の style.display プロパティにアクセスすると空の文字列が返されましたが、インライン スタイル経由でアクセスした同じプロパティは「none」を返しました。

この動作は、宣言されたスタイル の違いに起因します。 計算されたスタイル。宣言されたスタイルは、インラインまたはスタイルシートを通じて要素に明示的に割り当てられたスタイルです。一方、計算されたスタイルは、継承されたスタイルやカスケードされたスタイルなど、関連するすべての要素を考慮して、要素の最終的にレンダリングされたスタイルを表します。

Element.style にアクセスすると、宣言されたスタイルのみが取得されます。要素に適用される実際のスタイルを反映する計算されたスタイルを取得するには、window.getComputedStyle() メソッドを使用する必要があります。このメソッドは、継承、カスケード、ブラウザのデフォルト値によって影響を受けるプロパティを含む、要素のスタイルの包括的な表現を提供します。

getComputedStyle() を使用すると、要素の表示スタイルを確実に取得できます。は、最初はマスター スタイルシートによって隠されています:

const element = document.getElementById('myDiv');
const display = getComputedStyle(element).getPropertyValue('display');
// display will now return 'none' or 'block', as appropriate
ログイン後にコピー

この修正されたアプローチにより、要素の正確な計算スタイルに、その方法に関係なく確実にアクセスできるようになります。スタイルが宣言されています。

以上が`Element.style` がインライン スタイルシート スタイルとマスター スタイルシート スタイルに対して異なる値を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート