Tạo kiểu bằng lớp CSS trong JavaScript

Ở bài học trước, chúng ta đã học cách thay đổi CSS style của các phần tử thông qua việc thay đổi thuộc tính style. Thông thường đó không phải là một ý tưởng tốt. Lý do là, nếu phân tán các CSS style trong mã JavaScript, sau này sẽ rất khó khăn để thay đổi thiết kế trang web, vì sẽ phải lục lọi mã JavaScript để tìm các style đã được nhúng vào đó.

Để tiện cho việc bảo trì sau này, cách làm thuận tiện hơn sẽ là thêm hoặc xóa các lớp CSS của phần tử, từ đó tạo kiểu cho chúng theo cách mong muốn.

Hãy xem xét một ví dụ. Giả sử chúng ta có một vài đoạn văn:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Hãy làm sao để khi nhấp vào bất kỳ đoạn văn nào, đoạn văn đó sẽ được tô bằng một màu nào đó, ví dụ, màu xanh lá cây. Để làm điều này, trong file CSS hãy tạo một lớp đặc biệt để tô màu các đoạn văn:

.colored {
	color: green;
}

Ưu điểm của việc sử dụng lớp là, bây giờ có thể dễ dàng thay đổi màu mong muốn - để làm điều đó chỉ cần thay đổi trong file CSS, mà không cần động vào mã JavaScript. Điều này đặc biệt tiện lợi trong trường hợp bạn viết mã JavaScript, và sau này người khác sẽ tạo kiểu cho nó (có thể là người ít kinh nghiệm hơn, chỉ biết làm việc với CSS).

Vậy là, bây giờ, sau khi đã có lớp, khi nhấp vào bất kỳ đoạn văn nào có thể thay đổi màu của nó, đơn giản bằng cách thêm lớp của chúng ta vào nó:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // thêm lớp cho đoạn văn
	});
}

Hãy giải thích tại sao tôi chọn từ colored cho tên lớp, mà không phải là từ green, chỉ rõ ràng màu sắc mà chúng ta mong muốn.

Cho một đoạn văn. Cho các nút 'gạch ngang', 'in đậm', 'tô đỏ'. Hãy làm sao để khi nhấn vào mỗi nút, hành động được chỉ định sẽ xảy ra với đoạn văn (ví dụ, trở thành màu đỏ).