Trong bài hướng dẫn trước, tôi đã hướng dẫn cách thiết lập style trong JavaScript, như thế này.

Bây giờ, nếu thiết lập nhiều style trong JavaScript, ta sẽ phải

viết hàng trăm dòng mã chỉ để thiết lập các giá trị tính chất CSS.

Đó sẽ là một mớ bòng bong thực sự đấy.

Còn một cách khác mà ta có thể áp dụng.

Ta có thể tạo một class CSS,

và thêm một quy tắc CSS cho class đó với những style mới mà ta muốn,

rồi chủ động thêm tên class đó vào JavaScript.

Ta cùng bắt đầu trên này với tag ``.

Ta tạo một class `.catcolors`, và tạo quy tắc CSS cho class đó.

Và class sẽ có `color: orange`, và `background-color: black`.

Bây giờ để gán vào phần tử `heading`, ta có thể nhập:

`headingEl.className = "catcolors";

Ta có thể xóa mã gán màu

và màu nền trong JavaScript.

Ta-da!

Thành công rồi.

Các bạn có thấy gì kỳ lạ không?

Thuộc tính HTML cho các tên class chỉ là `class`.

Nếu tôi thực hiện trong HTML, nó sẽ là `class=”catcolors”`.

Nhưng khi thực hiện trong JavaScript, tôi phải nhập `.className`,

chúng ta không quen với cái đó.

Thực chất đó là bởi `class` là một từ khóa trong ngôn ngữ JavaScript

và mang ý nghĩa đặc biệt đối với ngôn ngữ đó.

Vì vậy, các trình duyệt quyết định sử dụng `className` để tham chiếu

thuộc tính class HTML, với mục đích đảm bảo rằng chúng không bị nhầm lẫn.

Hãy nhớ rằng, nếu muốn thiết lập thuộc tính class của mộ t phần tử,

ta nhập .className =.

Bây giờ để gán cho từng tên động vật,

ta có thể đặt nó vào trong vòng lặp, vậy là:

`nameEls[i].className = "catColors";`

Thao tác đó sẽ thêm tên class, nhưng thực ra nó sẽ loại bỏ bất kỳ class nào

đã từng ở vị trí này trước đó, vì ta đã nói là = mà.

Vậy nếu trước đó ta đã có bất kỳ class nào ở vị trí này, chúng đều sẽ biến mất.

Đúng là trước đó ta từng có class ở đó thật, class = animal.

Và nó đã chuyển thành catColors.

Như vậy, ta cần phải thêm một tên class mới vào thuộc tính class này.

Ta có thể làm điều đó bằng cách nhập += “ catColors”.

Được rồi đó.

Đây là phương pháp an toàn, vì nó sẽ lấy

bất kỳ class nào trước đó, thêm một dấu cách và đến class mới.

Ta còn một cách nữa có thể áp dụng cho những trình duyệt mới hơn,

sử dụng tính chất `classList`.

Để thực hiện điều đó, ta nhập: `nameEIs[i].classList.add(“catColors”);`.

Như vậy đẹp hơn rất nhiều, nhưng không phải ở đâu cũng áp dụng được.

Vì vậy nếu muốn sử dụng, các bạn phải đi tới caniuse.com,

và đảm bảo nó được hỗ trợ trong tất cả các trình duyệt

mà các bạn muốn trang web của mình hoạt động.

Nó đẹp hơn rất nhiều, nhưng sẽ không đẹp chút nào nếu trang web vỡ tan tành

vì ta đang sử dụng một hàm mà trình duyệt không biết tới.

Tôi sẽ chú thích ở đây vậy.

Vì tôi muốn trang web của tôi hoạt động trên nhiều trình duyệt khác nhau.

Vẫn sẽ có nhiều lúc ta muốn thay đổi style cá nhân,

thay vì gán tên class.

Một lần nữa, hãy nhớ rằng các bạn có trong tầm tay cả hai công cụ này,

và lựa chọn cho mình công cụ phù hợp nhất tùy theo tình hình.