jQuery를 사용하여 의사 요소 이후에 CSS를 어떻게 수정할 수 있나요?

jQuery를 사용하여 CSS ":after" 선택기에 액세스

":after" 의사 요소는 CSS에서 추가 항목을 추가하는 데 자주 사용됩니다. 시각적 요소를 특정 HTML 요소로 변환합니다. 그러나 jQuery를 사용하여 이 의사 요소에 액세스하는 것은 DOM의 직접적인 일부가 아니기 때문에 어려울 수 있습니다.

jQuery 메서드

제공된 jQuery 코드는 ":after" 요소의 테두리 너비를 변경했지만 ":after"는 유효한 CSS 선택자가 아니기 때문에 작동하지 않습니다. 대신 jQuery는 상위 요소의 클래스를 조작하고 추가 "변경된" 클래스를 전환하여 ":after" 요소에 액세스할 수 있습니다.

CSS 및 jQuery 코드:

.pageMenu .active.changed::after { 
    border-top-width: 22px;
    border-left-width: 22px;
}

$('.pageMenu .active').toggleClass('changed');

이 코드는 활성 메뉴 항목에 "changed" 클래스를 추가하여 ":after" 의사 요소에 적용되는 추가 CSS 규칙을 트리거합니다. "변경된" 클래스입니다.

참고:

위의 솔루션이 해결 방법을 제공하지만 ":after" 의사 요소는 기술적으로 일부가 아니라는 점을 기억하는 것이 중요합니다. DOM의 일부이며 JavaScript로 직접 조작할 수 없습니다. 그러나 의사 요소를 간접적으로 수정하는 데 사용할 수 있는 라이브러리와 기술이 있습니다. 이러한 기술에 대한 자세한 내용은 "jQuery를 사용하여 CSS 의사 요소 조작(예: :before 및 :after)"을 참조하세요.

위 내용은 jQuery를 사용하여 의사 요소 이후에 CSS를 어떻게 수정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!