JavaScript로 의사 클래스 스타일을 수정하는 방법

우리는 모두 CSS 의사 클래스에 대해 들어봤지만 JavaScript에도 의사 클래스가 있다는 사실은 알지 못했습니다. 프로젝트에서 종종 JavaScript를 사용하여 의사 요소(:before,:after)의 스타일을 동적으로 제어해야 하지만 우리 모두는 알고 있습니다. JavaScript 또는 jQuery에는 의사 클래스 선택기가 없습니다. 다음은 몇 가지 일반적인 방법을 요약한 것입니다.

HTML

<p class="red">Hi, this is a plain-old, sad-looking paragraph 
tag.</p>
CSS
.red::before {
content: &#39;red&#39;;
color: red;
}

방법 1

JavaScript 또는 jQuery를 사용하여

요소의 클래스 이름을 전환하고 스타일을 수정합니다.

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

방법 2

기존