JavaScript または jQuery を使用して CSS 擬似要素コンテンツを動的に変更するにはどうすればよいですか?

JavaScript と jQuery を使用した CSS 擬似要素の操作

CSS 擬似要素のコンテンツを動的に変更する機能 (例::前、::後) JavaScript または jQuery を使用すると、便利です。

jQuery ソリューション

jQuery を使用して疑似要素のコンテンツを変更するには、次の手順を使用できます。

1. 擬似要素が付加されている要素を選択します。
2. :after または :before を使用します。
3. content プロパティを目的の値に設定します。

たとえば、コンテンツ 'foo' を持つ ::after 疑似要素を次のように変更するには、 'bar' を表示:

$('span').find(':after').text('bar');

バニラ JavaScript解決策

バニラ JavaScript では、window.getComputedStyle() メソッドと要素の style プロパティに追加された ::after または ::before セレクターを使用して疑似要素を操作できます。

たとえば、jQuery の例と同じ結果を達成するには上:

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

データ属性を使用した代替アプローチ

代替アプローチは、データ属性を使用して目的のコンテンツを保存し、jQuery を使用してそれを動的に変更することです。

たとえば、データ属性をスパンに追加します。 element:

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

次に、jQuery で、疑似要素の attr() を設定して、そのコンテンツを操作します。

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

CSS で、その疑似要素を定義します。データ属性からのコンテンツ:

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

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