jQuery가 CSS 의사 요소를 수정하는 방법

CSS 의사 요소(의사 요소)는 DOM 요소가 아니므로 직접 선택할 수 없습니다.

다음 HTML 코드가 있다고 가정합니다.

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

및 CSS 코드:

.techbrood:before {
width: 0;
}

이제 요소의 클릭 이벤트에서 techbrood:before의 width 속성을 100%로 동적으로 설정하려고 합니다.

두 가지 방법이 있습니다. 하나는 새 스타일을 추가하는 것입니다.

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(이 방법은 techbrood 클래스가 있는 모든 요소에 영향을 미칩니다.)

또 다른 방법은 요소에 새 클래스를 추가하고 새 클래스의 속성을 설정하여 의사 요소의 속성을 변경하는 효과를 얻는 것입니다.

.techbrood.change:before{
width: 100%;
}

jQuery 코드:

$('#td_pseudo').addClass("change");