Sự bất tiện của class trong JavaScript

Giả sử chúng ta có một số lớp để tạo kiểu cho thông báo:

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

Giả sử trong một phần tử chúng ta đã hiển thị một thông báo thành công và gán cho nó lớp tương ứng cho thành công:

elem.classList.add('success');

Bây giờ, giả sử trong cùng phần tử này chúng ta hiển thị một thông báo lỗi và gán cho nó lớp tương ứng cho lỗi:

elem.classList.add('error');

Kết quả là trong phần tử sẽ có hai lớp xung đột với nhau:

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

Như vậy, trước khi thêm lớp mới, chúng ta sẽ phải xóa lớp trước đó:

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

Điều này không thuận tiện lắm, vì chúng ta có thể không biết chính xác lớp trước đó là gì và chúng ta sẽ phải xóa tất cả các lớp liên tiếp:

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

Cho một trường nhập liệu. Khi mất focus, hãy kiểm tra xem trong đó có nhập không quá 9 ký tự không. Nếu đúng như vậy, hãy tô màu viền của trường nhập liệu thành màu xanh lá cây, còn nếu không - thành màu đỏ.