WEBVTT

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

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

00:00:10.202 --> 00: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.

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

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

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

00:00:23.213 --> 00: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,

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

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

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

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

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

00:00:58.854 --> 00:01:05.813
`headingEl.className = "catcolors";

00:01:05.813 --> 00:01:09.485
Ta có thể xóa mã gán màu

00:01:09.485 --> 00:01:12.222
và màu nền trong JavaScript.

00:01:12.222 --> 00:01:13.322
Ta-da!

00:01:13.322 --> 00:01:15.113
Thành công rồi.

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

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

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

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

00:01:31.589 --> 00:01:33.806
chúng ta không quen với cái đó.

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

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

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

00:01:47.534 --> 00: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.

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

00:01:56.613 --> 00:02:00.333
ta nhập .className =.

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

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

00:02:06.657 --> 00:02:13.449
`nameEls[i].className = "catColors";`

00:02:13.449 --> 00: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

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

00:02:23.704 --> 00: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.

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

00:02:32.053 --> 00:02:34.340
Và nó đã chuyển thành catColors.

00:02:34.340 --> 00: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.

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

00:02:47.562 --> 00:02:48.828
Được rồi đó.

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

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

00:02:58.048 --> 00: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,

00:03:02.209 --> 00:03:04.975
sử dụng tính chất `classList`.

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

00:03:15.035 --> 00: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.

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

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

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

00:03:28.756 --> 00: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

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

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

00:03:38.143 --> 00: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.

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

00:03:46.067 --> 00:03:48.558
thay vì gán tên class.

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

00:03:54.463 --> 00: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.