1
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.

2
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

3
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.

4
00:00:14,671 --> 00:00:18,076
Đó sẽ là một mớ bòng bong thực sự đấy.

5
00:00:18,076 --> 00:00:20,666
Còn một cách khác mà ta có thể áp dụng.

6
00:00:20,666 --> 00:00:23,213
Ta có thể tạo một class CSS,

7
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,

8
00:00:28,275 --> 00:00:33,116
rồi chủ động thêm tên class đó vào JavaScript.

9
00:00:33,116 --> 00:00:38,932
Ta cùng bắt đầu trên này với tag ``.

10
00:00:38,932 --> 00:00:45,798
Ta tạo một class `.catcolors`, và tạo quy tắc CSS cho class đó.

11
00:00:45,798 --> 00:00:53,085
Và class sẽ có `color: orange`, và `background-color: black`.

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

13
00:00:58,854 --> 00:01:05,813
`headingEl.className = "catcolors";

14
00:01:05,813 --> 00:01:09,485
Ta có thể xóa mã gán màu

15
00:01:09,485 --> 00:01:12,222
và màu nền trong JavaScript.

16
00:01:12,222 --> 00:01:13,322
Ta-da!

17
00:01:13,322 --> 00:01:15,113
Thành công rồi.

18
00:01:15,113 --> 00:01:17,466
Các bạn có thấy gì kỳ lạ không?

19
00:01:17,466 --> 00:01:21,249
Thuộc tính HTML cho các tên class chỉ là `class`.

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

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

22
00:01:31,589 --> 00:01:33,806
chúng ta không quen với cái đó.

23
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

24
00:01:39,084 --> 00:01:42,613
và mang ý nghĩa đặc biệt đối với ngôn ngữ đó.

25
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

26
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.

27
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ử,

28
00:01:56,613 --> 00:02:00,333
ta nhập .className =.

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

30
00:02:04,383 --> 00:02:06,657
ta có thể đặt nó vào trong vòng lặp, vậy là:

31
00:02:06,657 --> 00:02:13,449
`nameEls[i].className = "catColors";`

32
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

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

34
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.

35
00:02:28,236 --> 00:02:32,053
Đúng là trước đó ta từng có class ở đó thật, class = animal.

36
00:02:32,053 --> 00:02:34,340
Và nó đã chuyển thành catColors.

37
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.

38
00:02:41,305 --> 00:02:47,562
Ta có thể làm điều đó bằng cách nhập += “ catColors”.

39
00:02:47,562 --> 00:02:48,828
Được rồi đó.

40
00:02:48,828 --> 00:02:52,044
Đây là phương pháp an toàn, vì nó sẽ lấy

41
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.

42
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,

43
00:03:02,209 --> 00:03:04,975
sử dụng tính chất `classList`.

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

45
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.

46
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,

47
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

48
00:03:26,532 --> 00:03:28,756
mà các bạn muốn trang web của mình hoạt động.

49
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

50
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.

51
00:03:36,254 --> 00:03:38,143
Tôi sẽ chú thích ở đây vậy.

52
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.

53
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,

54
00:03:46,067 --> 00:03:48,558
thay vì gán tên class.

55
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,

56
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.