jQuery를 사용하여 CSS 의사 요소의 스타일 속성에 어떻게 액세스할 수 있나요?

jQuery를 사용하여 의사 요소의 스타일 속성에 액세스

CSS 규칙을 순회하는 데 한계가 있으므로 이 문서에서는 jQuery 선택기를 사용하여 위치를 찾는 방법을 살펴봅니다. 의사 요소 규칙으로 인해 특정 효과가 있는 요소.

예를 들어, 요소:

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
}

선택적으로 수정 가능:

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

기본 배경 위치로 의사 요소를 선택하려면 다음 선택기 구문이 작동하지 않습니다.

$(".commentarea .author:before")

마찬가지로 .siblings()를 사용하여 특정 배경 이미지가 있는 요소를 찾으려고 하면 빈 값이 반환됩니다.

문제의 핵심은 의사 요소의 특성에 있습니다. 독립적인 선택기가 없으며 대신 주변 요소를 수정합니다. 즉, :before 및 :after는 선택하지 않습니다. 수정됩니다.

예를 들어 HTML:

<span>

및 CSS:

.a .b:before {
    content: "|Inserted using :before|";
}

텍스트 "|Inserted using :before|" 클래스 b는 클래스 a의 자손이므로 내부 범위 요소 앞에 삽입됩니다. 이는 의사 요소가 자체 선택기를 갖지 않지만 상위 요소에 영향을 미친다는 것을 보여줍니다.

따라서 표준 jQuery 선택기 구문을 사용하여 의사 요소를 직접 선택할 수는 없습니다. 한 가지 가능한 해결책은 jQueryRule(http://flesler.blogspot.com/2007/11/jqueryrule.html)과 같은 jQuery 플러그인을 활용하여 원래 CSS 규칙을 추출하는 것입니다.

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