ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery を使用して CSS 疑似要素のスタイル プロパティにアクセスするにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-12 19:40:11
オリジナル
498 人が閲覧しました

How Can I Access the Style Properties of CSS Pseudo-elements with jQuery?

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

CSS ルールを通過する際の制限を考慮して、この記事では、jQuery セレクターを使用して、擬似要素による特定の効果を持つ要素rules.

たとえば、選択的に変更できる要素:

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
}
ログイン後にコピー

を考えてみましょう:

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}
ログイン後にコピー

デフォルトの背景位置を持つ疑似要素を選択するには、次のセレクター構文は機能しません:

$(".commentarea .author:before")
ログイン後にコピー

同様に、を使用しようとします特定の背景画像を持つ要素を検索する .siblings() は空の結果を返します。

問題の核心は、疑似要素の性質にあります。これらには独立したセレクターはなく、代わりに周囲の要素を変更します。つまり、:before と :after は選択しません。

たとえば、HTML:

<span>
ログイン後にコピー

および CSS:

.a .b:before {
    content: "|Inserted using :before|";
}
ログイン後にコピー

テキスト「|Inserted using :before|」クラス b はクラス a の子孫であるため、内側のspan要素の前に挿入されます。これは、擬似要素には独自のセレクターはなく、その親要素に影響を与えることを示しています。

したがって、標準の jQuery セレクター構文を使用して擬似要素を直接選択することはできません。考えられる解決策の 1 つは、jQueryRule (http://flesler.blogspot.com/2007/11/jqueryrule.html) のような jQuery プラグインを利用して、元の CSS ルールを抽出することです。

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

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