JavaScript と jQuery は ::before や ::after などの CSS 疑似要素を操作できますか?

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

::before と ::after のような CSS 疑似要素を使用できます (両方とも)古いバージョンと新しいバージョン) を使用して選択および操作できます。 jQuery?

jQuery の .css() メソッドを使用する

スタイルシートに次の CSS ルールがあると仮定します:

.span::after { content: 'foo'; }

「foo」を変更するにはバニラ JavaScript または jQuery を使用して「bar」にするには、.css() を使用できます。メソッド。

バニラ JavaScript:

const element = document.querySelector('.span');
element.style.content = 'bar';

jQuery:

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

データ属性の使用

別の方法データ属性を使用してコンテンツを擬似要素に渡し、jQuery で操作します。

HTML の場合:

<span>foo</span>

jQuery の場合:

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

でCSS:

span:after {
  content: attr(data-content) ' any other text you may want';
}

追加のテキストが表示されないようにするには、seucollega のソリューションをこのアプローチと組み合わせることができます。

HTML 内:

<span>foo</span>

でjQuery:

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

CSS 内:

span.change:after {
  content: attr(data-content) ' any other text you may want';
}

これらのメソッドは、どちらかの JavaScript を使用して CSS 疑似要素のコンテンツを柔軟に選択および変更できます。または jQuery。

以上がJavaScript と jQuery は ::before や ::after などの CSS 疑似要素を操作できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。