[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.70,0:00:05.96,Default,,0000,0000,0000,,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.
Dialogue: 0,0:00:05.96,0:00:10.20,Default,,0000,0000,0000,,Bây giờ, nếu thiết lập nhiều style trong JavaScript, ta sẽ phải
Dialogue: 0,0:00:10.20,0:00:14.67,Default,,0000,0000,0000,,viết hàng trăm dòng mã chỉ để thiết lập các giá trị tính chất CSS.
Dialogue: 0,0:00:14.67,0:00:18.08,Default,,0000,0000,0000,,Đó sẽ là một mớ bòng bong thực sự đấy.
Dialogue: 0,0:00:18.08,0:00:20.67,Default,,0000,0000,0000,,Còn một cách khác mà ta có thể áp dụng.
Dialogue: 0,0:00:20.67,0:00:23.21,Default,,0000,0000,0000,,Ta có thể tạo một class CSS,
Dialogue: 0,0:00:23.21,0:00:28.28,Default,,0000,0000,0000,,và thêm một quy tắc CSS cho class đó với những style mới mà ta muốn,
Dialogue: 0,0:00:28.28,0:00:33.12,Default,,0000,0000,0000,,rồi chủ động thêm tên class đó vào JavaScript.
Dialogue: 0,0:00:33.12,0:00:38.93,Default,,0000,0000,0000,,Ta cùng bắt đầu trên này với tag ``.
Dialogue: 0,0:00:38.93,0:00:45.80,Default,,0000,0000,0000,,Ta tạo một class `.catcolors`, và tạo quy tắc CSS cho class đó.
Dialogue: 0,0:00:45.80,0:00:53.08,Default,,0000,0000,0000,,Và class sẽ có `color: orange`, và `background-color: black`.
Dialogue: 0,0:00:53.08,0:00:58.85,Default,,0000,0000,0000,,Bây giờ để gán vào phần tử `heading`, ta có thể nhập:
Dialogue: 0,0:00:58.85,0:01:05.81,Default,,0000,0000,0000,,`headingEl.className = "catcolors";
Dialogue: 0,0:01:05.81,0:01:09.48,Default,,0000,0000,0000,,Ta có thể xóa mã gán màu
Dialogue: 0,0:01:09.48,0:01:12.22,Default,,0000,0000,0000,,và màu nền trong JavaScript.
Dialogue: 0,0:01:12.22,0:01:13.32,Default,,0000,0000,0000,,Ta-da!
Dialogue: 0,0:01:13.32,0:01:15.11,Default,,0000,0000,0000,,Thành công rồi.
Dialogue: 0,0:01:15.11,0:01:17.47,Default,,0000,0000,0000,,Các bạn có thấy gì kỳ lạ không?
Dialogue: 0,0:01:17.47,0:01:21.25,Default,,0000,0000,0000,,Thuộc tính HTML cho các tên class chỉ là `class`.
Dialogue: 0,0:01:21.25,0:01:26.78,Default,,0000,0000,0000,,Nếu tôi thực hiện trong HTML, nó sẽ là `class=”catcolors”`.
Dialogue: 0,0:01:26.78,0:01:31.59,Default,,0000,0000,0000,,Nhưng khi thực hiện trong JavaScript, tôi phải nhập `.className`,
Dialogue: 0,0:01:31.59,0:01:33.81,Default,,0000,0000,0000,,chúng ta không quen với cái đó.
Dialogue: 0,0:01:33.81,0:01:39.08,Default,,0000,0000,0000,,Thực chất đó là bởi `class` là một từ khóa trong ngôn ngữ JavaScript
Dialogue: 0,0:01:39.08,0:01:42.61,Default,,0000,0000,0000,,và mang ý nghĩa đặc biệt đối với ngôn ngữ đó.
Dialogue: 0,0:01:42.61,0:01:47.53,Default,,0000,0000,0000,,Vì vậy, các trình duyệt quyết định sử dụng `className` để tham chiếu
Dialogue: 0,0:01:47.53,0:01:52.20,Default,,0000,0000,0000,,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.
Dialogue: 0,0:01:52.20,0:01:56.61,Default,,0000,0000,0000,,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ử,
Dialogue: 0,0:01:56.61,0:02:00.33,Default,,0000,0000,0000,,ta nhập .className =.
Dialogue: 0,0:02:00.33,0:02:04.38,Default,,0000,0000,0000,,Bây giờ để gán cho từng tên động vật,
Dialogue: 0,0:02:04.38,0:02:06.66,Default,,0000,0000,0000,,ta có thể đặt nó vào trong vòng lặp, vậy là:
Dialogue: 0,0:02:06.66,0:02:13.45,Default,,0000,0000,0000,,`nameEls[i].className = "catColors";`
Dialogue: 0,0:02:13.45,0:02:19.43,Default,,0000,0000,0000,,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
Dialogue: 0,0:02:19.43,0:02:23.70,Default,,0000,0000,0000,,đã từng ở vị trí này trước đó, vì ta đã nói là = mà.
Dialogue: 0,0:02:23.70,0:02:28.24,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:28.24,0:02:32.05,Default,,0000,0000,0000,,Đúng là trước đó ta từng có class ở đó thật, class = animal.
Dialogue: 0,0:02:32.05,0:02:34.34,Default,,0000,0000,0000,,Và nó đã chuyển thành catColors.
Dialogue: 0,0:02:34.34,0:02:41.30,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:41.30,0:02:47.56,Default,,0000,0000,0000,,Ta có thể làm điều đó bằng cách nhập += “ catColors”.
Dialogue: 0,0:02:47.56,0:02:48.83,Default,,0000,0000,0000,,Được rồi đó.
Dialogue: 0,0:02:48.83,0:02:52.04,Default,,0000,0000,0000,,Đây là phương pháp an toàn, vì nó sẽ lấy
Dialogue: 0,0:02:52.04,0:02:58.05,Default,,0000,0000,0000,,bất kỳ class nào trước đó, thêm một dấu cách và đến class mới.
Dialogue: 0,0:02:58.05,0:03:02.21,Default,,0000,0000,0000,,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,
Dialogue: 0,0:03:02.21,0:03:04.98,Default,,0000,0000,0000,,sử dụng tính chất `classList`.
Dialogue: 0,0:03:04.98,0:03:15.04,Default,,0000,0000,0000,,Để thực hiện điều đó, ta nhập: `nameEIs[i].classList.add(“catColors”);`.
Dialogue: 0,0:03:15.04,0:03:19.65,Default,,0000,0000,0000,,Như vậy đẹp hơn rất nhiều, nhưng không phải ở đâu cũng áp dụng được.
Dialogue: 0,0:03:19.65,0:03:24.01,Default,,0000,0000,0000,,Vì vậy nếu muốn sử dụng, các bạn phải đi tới caniuse.com,
Dialogue: 0,0:03:24.01,0:03:26.53,Default,,0000,0000,0000,,và đảm bảo nó được hỗ trợ trong tất cả các trình duyệt
Dialogue: 0,0:03:26.53,0:03:28.76,Default,,0000,0000,0000,,mà các bạn muốn trang web của mình hoạt động.
Dialogue: 0,0:03:28.76,0:03:32.19,Default,,0000,0000,0000,,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
Dialogue: 0,0:03:32.19,0:03:36.25,Default,,0000,0000,0000,,vì ta đang sử dụng một hàm mà trình duyệt không biết tới.
Dialogue: 0,0:03:36.25,0:03:38.14,Default,,0000,0000,0000,,Tôi sẽ chú thích ở đây vậy.
Dialogue: 0,0:03:38.14,0:03:41.34,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:41.34,0:03:46.07,Default,,0000,0000,0000,,Vẫn sẽ có nhiều lúc ta muốn thay đổi style cá nhân,
Dialogue: 0,0:03:46.07,0:03:48.56,Default,,0000,0000,0000,,thay vì gán tên class.
Dialogue: 0,0:03:48.56,0:03:54.46,Default,,0000,0000,0000,,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,
Dialogue: 0,0:03:54.46,0:00:00.00,Default,,0000,0000,0000,,và lựa chọn cho mình công cụ phù hợp nhất tùy theo tình hình.