Thay đổi luân phiên kiểu dáng thông qua data-attribute trong JavaScript

Để giải quyết vấn đề được mô tả trong bài học trước, chúng ta sẽ không thiết lập các lớp cho phần tử, mà sẽ thay đổi giá trị của thuộc tính data-. Điều này tiện lợi ở chỗ, một thuộc tính như vậy chỉ có thể có một giá trị duy nhất và khi ghi giá trị mới, nó sẽ tự động ghi đè lên giá trị cũ.

Ví dụ, chúng ta sẽ thiết lập kiểu thành công như sau:

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

Còn kiểu cho lỗi như sau:

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

Chúng ta sẽ thiết lập kiểu dáng cho các trạng thái của mình thông qua bộ chọn thuộc tính:

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

Bây giờ chúng ta có thể dễ dàng tô màu phần tử của mình thành màu thành công:

elem.dataset.type = 'success';

Và chúng ta sẽ tô màu lỗi như thế này:

elem.dataset.type = 'error';

Cho một input. Khi mất tiêu điểm, hãy kiểm tra số đã nhập vào đó. Nếu số này nhỏ hơn hoặc bằng mười, hãy tô màu input thành màu xanh lá cây, nếu từ mười đến hai mươi - màu vàng, còn nếu lớn hơn hai mươi - màu đỏ.