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

jQuery を使用した CSS ":after" セレクターへのアクセス

":after" 疑似要素は、CSS で追加の追加を行うためによく使用されます。視覚要素を特定の HTML 要素に追加します。ただし、この疑似要素に jQuery でアクセスするのは、DOM の直接の一部ではないため、困難な場合があります。

jQuery メソッド

提供された jQuery コードは、 「:after」要素の境界線の幅を指定できますが、「:after」は有効な CSS セレクターではないため、機能しません。代わりに、jQuery は親要素のクラスを操作し、追加の「変更された」クラスを切り替えて「:after」要素にアクセスできます。

CSS および jQuery コード:

.pageMenu .active.changed::after { 
    border-top-width: 22px;
    border-left-width: 22px;
}

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

このコードは、アクティブなメニュー項目に「変更された」クラスを追加します。これにより、メニュー項目に適用される追加の CSS ルールがトリガーされます。 「変更された」クラスの「:after」疑似要素。

注:

上記の解決策は回避策を提供しますが、「:after」に留意することが重要です。 " 疑似要素は技術的には DOM の一部ではないため、JavaScript で直接操作することはできません。ただし、疑似要素を間接的に変更するために利用できるライブラリと技術があります。これらの手法の詳細については、「jQuery を使用した CSS 疑似要素の操作 (例:before および :after)」を参照してください。

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