8

要素を調べると、Chromeの [ Matched CSS Rules ]ペインに定義 (::afterおよび::before継承された定義など) が表示されます。ただし、[計算済みスタイル]ペインには、ルート要素の計算済みスタイルのみが表示されます。

一部のプロパティが継承され、一部がオーバーライドされた疑似要素の CSS クラス階層全体があり、実際に適用されたスタイルのセットを確認する方法があるかどうかを知りたい (つまり、計算されたスタイル ペインに表示されるもの)ルート要素)

誰かがこれに光を当てることができれば、それは非常に役に立ちます。

編集 - 2014 年 2 月 13 日

最近のバージョンの Chrome には、確かにこの機能が組み込まれています。:-)

4

2 に答える 2

3

window.getComputedStyle( element[, pseudoElt] )

pseudoEltオプション

照合する疑似要素を指定する文字列。通常の要素の場合は省略 (または null) する必要があります。疑似クラスは ":focus" のように指定できます。

あなたが達成しようとしていることを誤解している可能性がありますが、ここでいくつかの JavaScript を試してみてください。役に立つことを願っています。

contentドキュメント内のすべての要素を繰り返し処理し、その:beforeと の取得を試み:afterます。
見つかった場合は、詳細を に出力しますconsole。
シンプルですが、実証可能です。

document.querySelectorAll( "*" ).forEach( ( e ) => {
  const ebc = window.getComputedStyle( e, ":before" ).content,
        eac = window.getComputedStyle( e, ":after" ).content;
  if ( ebc || eac ) {
    console.log( e );
    console.log( ( ebc ? "Before content = " + ebc : "No :before content" ) );
    console.log( ( eac ? "After content = " + eac : "No :after content" ) );
  }
} );
div:before {
  content: "This is a test.";
}
p:after {
  content: attr( data-content );
}
span:after {
  content: " dolor";
}
<div>
  <p data-content="&hellip;">Lorem <span>ipsum</span></p>
</div>

于 2012-12-20T10:43:28.820 に答える
1

はい、それはそれほど明白ではありませんが、そうです。Firebugを使用している場合は、[スタイル]ドロップダウンタブで[適用されたスタイルのみを表示]が選択されていることを確認する必要があります。次に、下のスクリーンショットからわかるように、疑似要素を選択して、オーバーライドなどを考慮した計算されたスタイル（または適用されているスタイル）を表示できるはずです。

計算されたスタイル

于 2012-12-17T15:58:13.277 に答える