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를 사용한 콘텐츠

또 다른 접근 방식은 데이터 속성을 사용하여 의사 요소 콘텐츠를 저장하는 것입니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!