jQuery를 사용하여 CSS 의사 요소(::before, ::after)의 스타일 속성에 어떻게 액세스하고 수정할 수 있습니까?

jQuery에서 의사 요소의 스타일 속성에 액세스

이 문서에서는 다음과 같은 의사 요소의 스타일 속성에 액세스하는 문제를 자세히 설명합니다. ::before 및 ::after, jQuery 사용

CSS에서는 의사 요소를 사용하여 모양을 수정합니다. 하지만 jQuery 선택기로 직접 타겟팅할 수는 없습니다. 본질적으로 의사 요소는 대상 요소 앞이나 뒤에 콘텐츠를 삽입하며 개별적으로 스타일을 지정할 수 없습니다.

예를 들어 다음 CSS 규칙이 있는 경우:

.example::before {
  content: "Added Text";
}

다음과 같이 jQuery를 사용하는 의사 요소는 작동하지 않습니다.

$(".example::before").css("color", "red");

대신 상위 요소를 대상으로 하고 :has() 선택기를 사용하여 특정 의사 요소가 있는 요소를 선택해야 합니다.

$(".example:has(::before)").css("color", "red");

또는 jQuery.cssRules() 플러그인을 사용하여 다음을 수행할 수 있습니다. CSS 규칙에 직접 액세스하고 수정:

var rules = jQuery.cssRules();
for (var i = 0; i < rules.length; i++) {
  if (rules[i].selectorText === ".example::before") {
    rules[i].style.color = "red";
  }
}

그러나 이 접근 방식은 브라우저 지원 및 호환성으로 인해 제한된다는 점에 유의하는 것이 중요합니다. 문제.

요약하자면, jQuery 선택기로 의사 요소를 직접 선택할 수는 없지만 해당 스타일 속성에 액세스하고 수정하는 데 사용할 수 있는 대체 방법이 있습니다.

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