6

ページ上のすべてのDOM要素の使用済みcss値を取得しようとしています。私が「使用された値」と言うとき、私はW3C仕様で指定された定義を指します：

6.1.3使用値

計算された値は、ドキュメントをフォーマットせずに可能な限り処理されます。ただし、一部の値は、ドキュメントがレイアウトされているときにのみ決定できます。たとえば、要素の幅がその包含ブロックの特定のパーセンテージに設定されている場合、包含ブロックの幅が決定されるまで幅を決定することはできません。使用される値は、計算された値を取得し、残りの依存関係を絶対値に解決した結果です。

これらは、実際のページレイアウトに関して計算された最終値である必要があります。Mozillaのドキュメントでは、使用済みの値を取得するために使用できると主張していますがwindow.getComputedStyle、計算された値は使用済みの値とは異なるため、これは私には意味がありません（使用済みの値が必要です）。これらが使用されている値であっても、これがFirefoxでのみ機能するかどうかはわかりません。すべてのブラウザで使用済みの値を確実に取得する方法はありますか？

4

2 に答える 2

4

注：質問が出されてから、世界は進んでいます。宣言、カスケード、指定、計算、解決、使用、実際の値のレイヤーが以前よりも多くなりました。解決された値getComputedStyleを返します（プロパティに応じて計算または使用されます）。レイヤーは次のとおりです。

CSSカスケードおよび継承レベル4から：

ユーザーエージェントがドキュメントを解析してドキュメントツリーを構築したら、ツリー内のすべての要素に、それに対応してフォーマット構造内のすべてのボックスに、ターゲットメディアタイプに適用されるすべてのプロパティに値を割り当てる必要があります。

特定の要素またはボックスのCSSプロパティの最終的な値は、複数ステップの計算の結果です。

  1. 最初に、要素に適用されたすべての宣言された値が、各要素の各プロパティについて収集されます。要素に適用される宣言された値はゼロまたは多数ある可能性があります。
  2. カスケードすると、カスケード値が生成されます。要素ごとのプロパティごとに最大で1つのカスケード値があります。
  3. デフォルトでは、指定された値が生成されます。すべての要素には、プロパティごとに1つの指定された値があります。
  4. 値の依存関係を解決すると、計算された値が生成されます。すべての要素には、プロパティごとに1つの計算値があります。
  5. ドキュメントをフォーマットすると、使用された値が得られます。そのプロパティが要素に適用される場合、要素は特定のプロパティに使用される値のみを持ちます。
  6. 最後に、使用された値は、表示環境の制約に基づいて実際の値に変換されます。使用される値と同様に、要素の特定のプロパティには実際の値がある場合とない場合があります。

次に、CSSオブジェクトモデルは解決された値を定義します。

getComputedStyle()歴史的には、要素または疑似要素の「計算値」を返すように定義されていました。ただし、「計算値」の概念はCSSのリビジョン間で変更されgetComputedStyle()ましたが、デプロイされたスクリプトとの互換性のためにの実装は同じままである必要がありました。この問題に対処するために、この仕様では解決された値の概念が導入されています。

特定のロングハンドプロパティの解決された値は、次のように決定できます。

...その後に、解決された値が計算された値であるか使用された値であるかを示すプロパティ（特定のプロパティとカテゴリ）のリストが続きます。

その背景で：

getComputedStyle最新のすべての主要なブラウザで動作します。IEの以前のバージョンは、の形式でほぼ同等のものを提供しcurrentStyleます。

getComputedStyle解決された値を返します。これは、任意のプロパティに対して計算値または使用値のいずれかであり、CSSOM仕様では、どのプロパティがどの種類の値でどのような状況で返されるかを明確に定義しています。CSSC＆I4またはCSSOMには、解決された値が使用値ではない場合に使用値にアクセスする方法、または実際の値にアクセスする方法を定義するものは何もありません。gsneddersは、ワーキンググループに確認して確認したと言っています。少なくともまだ、使用済みの値を取得する方法はありません。

解決された値は、おそらく必要なものには十分です。たとえば、次の例は207.5px、ではなく、または同様のものを示してい50%ます。これは解決された値であり、この特定の場合に使用される値でもありますが（ isではないwidth要素で使用したため）、この場合、サブピクセルレンダリングが実行可能で適切かどうかによっては、実際の値ではない可能性があります。displaynonecontents

(function() {
  var target = document.getElementById("target");
  var style = window.getComputedStyle(target);
  display("computed width = " + style.width);
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();
<div id="target" style="display: inline-block; width: 50%">x</div>

于 2012-06-10T17:29:33.690 に答える
-4

ほとんどの場合、jQueryまたは別の優先ライブラリを使用できます。

たとえば、質問のタイトルがfont-size:100%適用されており、firebugを使用して取得できます。しかし、jQuery apiを使用すると、次のように使用される値を取得できます。

$('#question-header .question-hyperlink').css('font-size');//run in console
//or enter this in the url bar
//javascript:alert($('#question-header .question-hyperlink').css('font-size'));
//returns "23.06px"

注意：ライブラリはこのページに含まれていますが、jQueryを含み、必要なプロパティをポーリングするブックマークレットを作成するのはかなり簡単です。

于 2012-06-10T23:39:45.863 に答える