JavaScript와 jQuery가 ::before 및 ::after와 같은 CSS 의사 요소를 조작할 수 있습니까?

JavaScript 및 jQuery를 사용하여 CSS 의사 요소 선택 및 조작

:before 및 ::after와 같은 CSS 의사 요소를 사용할 수 있습니까(둘 다) 이전 버전과 새 버전)을 jQuery를 사용하여 선택하고 조작하시겠습니까?

사용 jQuery의 .css() 메서드

스타일시트에서 다음 CSS 규칙을 가정합니다.

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

바닐라 JavaScript 또는 jQuery를 사용하여 'foo'를 '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';
}

추가문자 방지를 위해 이 접근법은 seucolega의 솔루션과 결합될 수 있습니다.

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 또는 jQuery를 사용하여 CSS 의사 요소의 콘텐츠를 선택하고 수정할 수 있는 유연성을 제공합니다.

위 내용은 JavaScript와 jQuery가 ::before 및 ::after와 같은 CSS 의사 요소를 조작할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!