jQuery または JavaScript を使用して CSS 疑似要素 (:before、:after) のスタイル プロパティにアクセスするにはどうすればよいですか?

jQuery を使用した疑似要素のスタイル プロパティへのアクセス

:before や :after などの疑似要素は、装飾コンテンツをオブジェクトに追加するために使用されます。要素。視覚的に検査することはできますが、jQuery を使用してスタイル プロパティに直接アクセスするのは難しい場合があります。

通常の要素とは異なり、疑似要素は DOM に存在せず、標準のセレクターを使用して選択することはできません。これは、それらの目的が、独立したコンテンツを提供することではなく、関連する要素の外観を変更することであるためです。

指定されたシナリオでは、デフォルトの背景位置を持つ疑似要素を検出しようとしています。 :before は有効な jQuery セレクターではないため、$(".commentarea .author:before") を使用すると機能しません。

代わりに、回答で説明されている jQuery プラグインを使用して元の CSS ルールを抽出してみることができます。 : http://flesler.blogspot.com/2007/11/jqueryrule.html。このプラグインを使用すると、CSS ルールを解析してそのプロパティにアクセスできます。

あるいは、JavaScript を使用して、疑似要素の効果を含む要素の計算されたスタイルにアクセスすることもできます。

const computedStyle = window.getComputedStyle(element);
const backgroundImage = computedStyle.backgroundImage;
const backgroundPosition = computedStyle.backgroundPosition;

このアプローチを使用すると、疑似要素によって行われた変更を含め、ブラウザで表示される要素のスタイル プロパティを取得できます。ただし、特に複雑なカスケードの場合、計算されたスタイルが実際のソース CSS ルールを必ずしも反映するとは限らないことに注意することが重要です。

以上がjQuery または JavaScript を使用して CSS 疑似要素 (:before、:after) のスタイル プロパティにアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。