Tạo kiểu bằng lớp trong JavaScript
Tạo kiểu cho các phần tử thông qua thuộc tính style
đôi khi thuận tiện, nhưng thông thường - đó không phải là
ý tưởng hay nhất. Vấn đề là các kiểu
sẽ bị phân tán khắp tệp JavaScript
và sẽ khó khăn để thay đổi chúng.
Thuận tiện hơn nhiều là đặt các kiểu trong tệp CSS
để có thể dễ dàng thay đổi chúng,
mà không cần phải lục lọi trong mã JavaScript.
Giả sử chúng ta có một phần tử hiển thị một thông báo nào đó. Thông báo có thể là "tốt" và được hiển thị màu xanh lá cây và "xấu" được hiển thị màu đỏ. Giải pháp tốt nhất trong trường hợp này sẽ là tạo ra các lớp CSS tương ứng:
.success {
color: green;
}
.error {
color: red;
}
Bây giờ khi hiển thị thông báo "tốt" chúng ta sẽ cung cấp cho phần tử lớp "tốt":
elem.textContent = 'good';
elem.classList.add('success');
Còn khi hiển thị thông báo "xấu" chúng ta sẽ cung cấp cho phần tử lớp "xấu":
elem.textContent = 'bad';
elem.classList.add('error');
Cho các đoạn văn có chứa số. Duyệt qua các đoạn văn này bằng vòng lặp và những đoạn văn chứa số chẵn, hãy tô màu đỏ, còn những đoạn chứa số lẻ - hãy tô màu xanh lá cây.
