JavaScript 또는 jQuery를 사용하여 CSS 의사 요소 콘텐츠를 어떻게 동적으로 변경할 수 있습니까?

JavaScript 및 jQuery로 CSS 의사 요소 조작

CSS 의사 요소의 콘텐츠를 동적으로 수정하는 기능(예: ::) before, ::after) JavaScript나 jQuery를 사용하면 유용합니다.

jQuery 솔루션

jQuery를 사용하여 의사 요소의 내용을 변경하려면 다음 단계를 사용할 수 있습니다.

1. 의사 요소가 첨부된 요소를 선택합니다.
2. :after 또는 :before 선택기를 사용하여 대상을 지정합니다. 의사 요소.
3. 콘텐츠 속성을 원하는 값으로 설정합니다.

예를 들어 'foo' 콘텐츠가 포함된 ::after 의사 요소를 수정하여 'bar'를 표시합니다. :

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

바닐라 JavaScript 솔루션

바닐라 JavaScript에서는 window.getCompulatedStyle() 메서드와 요소의 스타일 속성에 추가된 ::after 또는 ::before 선택기를 사용하여 의사 요소를 조작할 수 있습니다.

예를 들어 위의 jQuery 예제와 동일한 결과를 얻으려면 다음을 수행하세요.

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

데이터 속성을 사용한 대체 접근 방식

대안 접근 방식은 데이터 속성을 사용하여 원하는 콘텐츠를 저장한 다음 jQuery를 사용하여 이를 동적으로 수정하는 것입니다.

예를 들어, 범위 요소에 데이터 속성을 추가합니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!