elements_javascript スキルの CSS 情報を読み取る JavaScript コード

たとえば、一連のスタイル情報が HTML 要素に対してカスケードされ、width 属性の値が 80px であるとします。次に、スクリプトを呼び出してこの値を読み取ると、結果は常に空の文字列になりますが、実際には「80px」を取得したいと考えています。この状況に対して、David Flanagan は書籍『The Definitive Guide to JavaScript (Fifth Edition)』で解決策を示しています。

以下は JavaScript への翻訳です: The Definitive Guide, 5th Edition Chapter16 Section4
スクリプトで計算されたスタイル

HTML 要素の style 属性は、style HTML 属性と同等です。また、style 属性の値として、CSS2 プロパティ オブジェクトのみがそのような要素のインライン スタイル情報になります。これには、CSS カスケード内の他のスタイルは含まれません。カスケード内のスタイルを無視して、要素に割り当てられた正確なスタイル設定を知りたい場合があります。やりたいことは、要素のスタイルを計算することだけです。残念ながら、計算されたスタイルの名前はあいまいです。これは、ブラウザーが要素を表示する前に実行される計算に関連しています。すべてのスタイルが要素に適用できるかどうかが試行され、適用可能なすべてのスタイルは、要素内のコンテンツにマージされます。要素の埋め込みスタイル。この集約されたスタイル情報を使用して、ブラウザ ウィンドウで要素を正しくレンダリングできます。 W3C 標準では、要素の計算されたスタイルを決定するために使用される API は、ウィンドウ オブジェクトの getComputedStyle() メソッドです。このメソッドの最初のパラメータは、スタイルが計算されると予想される要素です。 2 番目のパラメータは、「:before」や「:after」など、任意の CSS 疑似オブジェクトです。おそらく疑似オブジェクトには興味がないかもしれませんが、Mozilla と Firefox のこのメソッドの実装では、2 番目のパラメーターは無視できません。そうしないと、getComputedStyle() が 2 番目のパラメーターのために null をスローすることになります。 getComputedStyle() の戻り値は、読み込まれたすべての要素または疑似オブジェクトのスタイルを表す CSS2 プロパティ オブジェクトです。埋め込みスタイル情報を制御できる CSS2 プロパティ オブジェクトとは異なり、getComputedStyle() によって返されるオブジェクトは読み取り専用です。 IE は getComputedStyle() メソッドをサポートしていませんが、より簡単な代替メソッドを提供しています。各 HTML 要素には、計算されたスタイルを制御する currentStyle 属性があります。 IE の API の唯一の欠点は、疑似オブジェクト スタイルをクエリする方法が提供されていないことです。計算されたスタイルの例として、次のクロスプラットフォーム コードを使用して、要素が表現されるフォント スタイルを決定できます:

コードをコピー コードは次のとおりです:

var p = document.getElementsByTagName("p")[0]; // doc の最初の段落を取得します
var typeface = ""; // その書体が必要です
if (p.currentStyle) // 最初に単純な IE API を試してください
typeface = p.currentStyle.fontFamily
else if (window.getComputedStyle) // それ以外の場合は W3C API を使用してください
typeface = window.getComputedStyle(p, null).fontFamily;

計算されたスタイルは高速ですが、常に必要な情報が得られるわけではありません。先ほどのフォントの例を考えてみましょう。 font-family プロパティはカンマ区切りのリストを受け入れ、プラットフォーム間で必要なフォント タイプを簡単に提供します。計算された fontFamily プロパティをクエリすると、要素に適用されるフォント ファミリ スタイルの値を簡単に決定できます。これにより、「arial,helvetica,sans-serif」のような値が返される可能性がありますが、実際にどのフォントが使用されているかはわかりません。同様に、要素が絶対的に配置されておらず、計算されたスタイルの top プロパティと left プロパティを使用して要素の位置とサイズをクエリしようとすると、常に「auto」が返されます。これは完全に合法な CSS 値ですが、あなたが望むものではありません。