0:00:00.702,0:00:05.963
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.

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

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

0:00:14.671,0:00:18.076
Đó sẽ là một mớ bòng bong thực sự đấy.

0:00:18.076,0:00:20.666
Còn một cách khác mà ta có thể áp dụng.

0:00:20.666,0:00:23.213
Ta có thể tạo một class CSS,

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

0:00:28.275,0:00:33.116
rồi chủ động thêm tên class đó vào JavaScript.

0:00:33.116,0:00:38.932
Ta cùng bắt đầu trên này với tag ``.

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

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

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

0:00:58.854,0:01:05.813
`headingEl.className = "catcolors";

0:01:05.813,0:01:09.485
Ta có thể xóa mã gán màu

0:01:09.485,0:01:12.222
và màu nền trong JavaScript.

0:01:12.222,0:01:13.322
Ta-da!

0:01:13.322,0:01:15.113
Thành công rồi.

0:01:15.113,0:01:17.466
Các bạn có thấy gì kỳ lạ không?

0:01:17.466,0:01:21.249
Thuộc tính HTML cho các tên class chỉ là `class`.

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

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

0:01:31.589,0:01:33.806
chúng ta không quen với cái đó.

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

0:01:39.084,0:01:42.613
và mang ý nghĩa đặc biệt đối với ngôn ngữ đó.

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

0:01:47.534,0:01:52.205
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.

0:01:52.205,0:01:56.613
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ử,

0:01:56.613,0:02:00.333
ta nhập .className =.

0:02:00.333,0:02:04.383
Bây giờ để gán cho từng tên động vật,

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

0:02:06.657,0:02:13.449
`nameEls[i].className = "catColors";`

0:02:13.449,0:02:19.427
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

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

0:02:23.704,0:02:28.236
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.

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

0:02:32.053,0:02:34.340
Và nó đã chuyển thành catColors.

0:02:34.340,0:02:41.305
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.

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

0:02:47.562,0:02:48.828
Được rồi đó.

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

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

0:02:58.048,0:03:02.209
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,

0:03:02.209,0:03:04.975
sử dụng tính chất `classList`.

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

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

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

0:03:24.014,0:03:26.532
và đảm bảo nó được hỗ trợ trong tất cả các trình duyệt

0:03:26.532,0:03:28.756
mà các bạn muốn trang web của mình hoạt động.

0:03:28.756,0:03:32.189
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

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

0:03:36.254,0:03:38.143
Tôi sẽ chú thích ở đây vậy.

0:03:38.143,0:03:41.337
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.

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

0:03:46.067,0:03:48.558
thay vì gán tên class.

0:03:48.558,0:03:54.463
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,

0:03:54.463,0:00:00.000
và lựa chọn cho mình công cụ phù hợp nhất tùy theo tình hình.