JavaScript에서 data- 속성을 통한 스타일 전환

이전 강의에서 설명한 문제를 해결하기 위해, 우리는 요소에 클래스를 지정하지 않고, data- 속성의 값을 변경할 것입니다. 이 방법의 편리한 점은, 이러한 속성은 오직 하나의 값만 가질 수 있으며, 새 값을 기록하면 이전 값이 자동으로 덮어씌워진다는 것입니다.

예를 들어, 성공 스타일을 다음과 같이 설정할 수 있습니다:

<div id="elem" data-type="success">
	text
</div>

그리고 오류 스타일은 다음과 같이:

<div id="elem" data-type="error">
	text
</div>

상태별 스타일은 속성 선택자를 통해 설정하겠습니다:

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

이제 우리의 요소를 성공 색상으로 쉽게 변경할 수 있습니다:

elem.dataset.type = 'success';

그리고 오류 색상으로는 다음과 같이 변경합니다:

elem.dataset.type = 'error';

인풋이 주어져 있습니다. 포커스를 잃을 때 입력된 숫자를 확인하세요. 만약 숫자가 10보다 작거나 같으면 인풋을 녹색으로, 10에서 20 사이이면 노란색으로, 20보다 크면 빨간색으로 변경하세요.