JavaScript에서 스타일링을 위한 하나의 클래스

요소의 상태에 따라 부여하는 두 개의 클래스가 있다고 가정해 봅시다:

div.active {
	color: red;
}
div.passive {
	color: black;
}

실제로 두 클래스의 존재는 여기서 방해가 될 수 있습니다. 이런 경우 :not 셀렉터를 통해 다음과 같이 스타일을 다시 작성할 수 있습니다:

div.active {
	color: red;
}
div:not(active) {
	color: black;
}

이렇게 하면 요소를 활성화하거나 비활성화하는 방식으로 클래스를 편리하게 토글할 수 있습니다:

elem.classList.toggle('active');

단락이 주어졌습니다. 각 단락을 첫 번째 클릭 시 빨간색으로, 두 번째 클릭 시 다시 검은색으로 변하도록 만드세요.