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

jQuery로 의사 요소 조작: ":after" 선택기 액세스

":after"와 같은 CSS 의사 요소를 수정하면 jQuery에 대한 과제를 제시합니다. 속성을 직접 변경하는 것은 불가능하지만 대체 접근 방식이 존재합니다.

제한 사항 이해

":after" 요소는 표준 DOM의 일부가 아니므로 액세스할 수 없습니다. 자바스크립트로. 따라서 다음과 같은 선택기를 사용하여 스타일을 수정하려고 하면

$('.pageMenu .active:after').css(...)

작동하지 않습니다.

동적 클래스를 사용한 해결 방법

한 가지 해결 방법은 다음과 같습니다. 수정된 스타일을 사용하여 새 클래스를 요소에 동적으로 추가합니다. 예를 들어:

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

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

이 방법은 "changed"를 추가합니다. 원래 ":after" 스타일을 수정된 스타일로 재정의하는 클래스입니다. widths.

대체 기술

동적 클래스 해결 방법 외에도 JavaScript를 사용하여 의사 요소 스타일을 읽거나 수정하는 다양한 기술이 있습니다. 포괄적인 가이드는

"jQuery를 사용하여 CSS 의사 요소 조작(예: :before 및 :after)"을 참조하세요.

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