JavaScript는 의사 클래스 스타일 수정을 구현합니다.

프로젝트에서 요소의 스타일(:before,:after)을 동적으로 제어하기 위해 JavaScript를 사용해야 하는 경우가 많지만 JavaScript나 jQuery에는 의사 클래스 선택기가 없다는 것을 우리 모두 알고 있습니다. 본 글에서는 자바스크립트에서 의사 클래스 스타일을 수정하는 방법과 코드 구현 과정을 주로 소개합니다.

HTML

안녕하세요, 이것은 평범하고 슬프게 보이는 단락 태그입니다.

CSS

.red::before {
content: 'red';
color: red;
}

방법 1

JavaScript 또는 jQuery를 사용하여

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

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

방법 2

기존