JavaScript에서 CSS 클래스를 사용한 스타일링의 장점

직접 스타일을 변경하는 대신 클래스를 사용하는 것은 또 다른 장점이 있습니다. 손쉽게 요소의 스타일이 번갈아 변경되도록 만들 수 있습니다.

예를 들어, 첫 번째 클릭 시 단락이 특정 색상으로 변경되고, 다시 클릭하면 원래 색상으로 돌아오도록 만들 수 있습니다. 이를 위해선 add 메서드를 toggle 메서드로 바꾸기만 하면 됩니다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.toggle('colored');
	});
}

이전 문제를 수정하여 버튼을 다시 누르면 해당 버튼의 동작이 취소되도록 하세요.