JavaScript または jQuery を使用して CSS 疑似要素 (::before や ::after など) を選択および操作するにはどうすればよいですか?

JavaScript または jQuery を使用した CSS 疑似要素の選択と操作

::before や ::after などの CSS 疑似要素の使用、DOM に追加のコンテンツを追加せずに、要素に追加のスタイルを追加できます。ただし、これらの疑似要素の選択と操作は難しい場合があります。

jQuery を使用した疑似要素の選択

jQuery では、次と同じ構文を使用して疑似要素を選択できます。通常の要素の場合。たとえば、.span クラスの ::after 疑似要素を選択するには、次を使用します。

$('span:after')

例の 'foo' コンテンツを変更するには、jQuery css() を使用できます。方法:

$('span:after').css('content', 'bar');

バニラを使用するJS

バニラ JS を使用したい場合は、:before セレクターと :after セレクターを使用して疑似要素を選択することもできます。ただし、jQuery よりも複雑な構文が必要です。

document.querySelector('.span::after')

コンテンツを変更するには、style.content プロパティを使用できます。

document.querySelector('.span::after').style.content = 'bar';

擬似要素の操作jQuery を使用したコンテンツ

もう 1 つのアプローチは、データ属性を使用して、疑似要素のコンテンツ。 HTML 内:

<span data-content="foo"></span>

jQuery では、hover() メソッドを使用してホバー時のコンテンツを更新できます。

$('span').hover(function(){
    $(this).attr('data-content', 'bar');
});

CSS では、attr( ) data-content 属性にアクセスし、疑似要素の内容を設定する関数:

span:after {
    content: attr(data-content);
}

これにより、変更が可能になります追加のマークアップを追加したり、既存の CSS ルールをオーバーライドしたりせずに、疑似要素のコンテンツを作成します。

以上がJavaScript または jQuery を使用して CSS 疑似要素 (::before や ::after など) を選択および操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。