자바스크립트에서 클래스의 불편함

메시지 스타일링을 위한 몇 가지 클래스가 있다고 가정해 보겠습니다:

.success {
	color: green;
}
.warning {
	color: orange;
}
.error {
	color: red;
}

어떤 요소에 성공 메시지를 출력하고 성공에 해당하는 클래스를 할당했다고 가정해 보겠습니다:

elem.classList.add('success');

이제 같은 요소에 오류 메시지를 출력하고 오류에 해당하는 클래스를 할당해야 한다고 가정해 보겠습니다:

elem.classList.add('error');

결과적으로 요소에는 서로 충돌하는 두 개의 클래스가 존재하게 됩니다:

<div id="elem" class="success error">
	text
</div>

즉, 새로운 클래스를 추가하기 전에 먼저 이전 클래스를 제거해야 한다는 뜻입니다:

elem.classList.remove('success');
elem.classList.add('error');

이전 클래스가 정확히 무엇이었는지 알지 못할 수 있고, 결국 가능한 모든 클래스를 차례로 제거해야 하기 때문에 이는 그다지 편리하지 않습니다:

elem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');

인풋이 주어져 있습니다. 포커스를 잃을 때, 인풋에 9자 이하의 문자가 입력되었는지 확인하세요. 만약 그렇다면 인풋의 테두리를 초록색으로, 그렇지 않다면 빨간색으로 색칠하세요.