jQuery を使用して CSS :after 疑似要素を変更するにはどうすればよいですか?

jQuery を使用した疑似要素の操作: 「:after」セレクターへのアクセス

「:after」などの CSS 疑似要素を変更すると、 jQuery に存在する課題。プロパティを直接変更することはできませんが、代替アプローチが存在します。

制限事項を理解する

":after" 要素は標準 DOM の一部ではないため、アクセスできません。 JavaScriptによる。したがって、

$('.pageMenu .active:after').css(...)

のようなセレクターを使用してスタイルを変更しようとしても機能しません。

動的クラスを使用した回避策

1 つの回避策は次のとおりです。変更されたスタイルを持つ新しいクラスを要素に動的に追加します。例:

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$('.pageMenu .active').toggleClass('changed');

このメソッドは「変更された」を追加しますクラス。元の ":after" スタイルを変更されたスタイルでオーバーライドします。 widths.

代替手法

動的クラスの回避策に加えて、JavaScript を使用して疑似要素スタイルを読み取りまたは変更するためのさまざまな手法が存在します。包括的なガイドについては、

「jQuery を使用した CSS 擬似要素の操作 (例:before および :after)」を参照してください。

以上がjQuery を使用して CSS :after 疑似要素を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。