JavaScript/jQuery를 사용하여 CSS 의사 요소(::before, ::after)를 선택하고 조작하려면 어떻게 해야 합니까?

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

JavaScript 또는 jQuery를 사용하여 ::before 및 ::after와 같은 CSS 의사 요소를 선택하고 조작하려면, 몇 가지 다른 기술을 사용할 수 있습니다.

다음을 사용하여 콘텐츠 조작 jQuery

jQuery를 사용하면 다음과 같이 의사 요소의 콘텐츠를 검색하고 조작할 수 있습니다.

// Get the content of ::after for an element with class "span"
var content = $('.span::after').text();

콘텐츠를 변경하려면 새 값을 할당하면 됩니다.

// Change the content of ::after for elements with class "span"
$('.span::after').text('bar');

데이터로 콘텐츠 조작 속성

또는 데이터 속성과 jQuery를 사용하여 의사 요소에 콘텐츠를 전달할 수 있습니다.

<!-- Element with a data attribute -->
<span data-content="foo">foo</span>

// Get the content from the data attribute
var content = $('span').attr('data-content');

// Manipulate the pseudo-element content
$('.span::after').text(content);

마우스를 올리면 콘텐츠를 변경하려면 이 접근 방식을 결합할 수 있습니다. 이벤트 핸들러를 사용하면:

$('span').hover(function() {
  // Change the content of ::after on hover
  $(this).attr('data-content', 'bar');
});

span::after {
  content: attr(data-content) /* Combine this with seucolega's solution */ ' any other text you may want';
}

이러한 기술을 사용하면 이벤트를 동적으로 제어할 수 있습니다. 웹 애플리케이션에서 의사 요소의 내용과 모양.

위 내용은 JavaScript/jQuery를 사용하여 CSS 의사 요소(::before, ::after)를 선택하고 조작하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!