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