JavaScript Add Class: Hướng dẫn

Thêm thuộc tính class vào phần tử giúp nhà phát triển tạo trải nghiệm người dùng động trên trang web. Khi thuộc tính class được thêm vào phần tử, phần tử được chọn sẽ nhận kiểu dáng liên kết với tên class đó.

Hãy nghĩ về người dùng nhấp nút. Khi nút được nhấp, chúng ta muốn một phần của trang web thay đổi dựa trên bảng kiểu CSS. Chúng ta có thể gán tên class liên kết với kiểu dáng đó cho phần tử để thay đổi giao diện sau khi nút được nhấp.

Tạo trải nghiệm tương tác quan trọng trong bất kỳ lập trình front-end nào. Trong hướng dẫn này, chúng ta sẽ khám phá hai cách thêm tên class vào phần tử được chọn trong JavaScript thuần túy. Cuối cùng, bạn sẽ có thể dùng công cụ này trong dự án riêng.

Cách dùng JavaScript Add Class

Trong JavaScript, thêm tên class có thể làm theo vài cách. Trước tiên, chọn phần tử HTML mong muốn. Sau đó, ta có lựa chọn dùng thuộc tính className hoặc phương thức add() để thêm tên class vào phần tử. Chúng ta sẽ đi qua cú pháp và cách dùng ở phần sau.

Nhớ rằng, chúng ta dùng JavaScript thuần túy ở đây. Không cần thư viện. Vì dùng JavaScript thông thường, thực hành phổ biến là gói logic trên trong hàm và truyền hàm đó cho trình xử lý sự kiện. Điều này đảm bảo hàm thêm tên class chỉ xảy ra sau khi sự kiện cụ thể đã xảy ra.

Về phần tử HTML, chúng có thể có nhiều tên class. Điều này hữu ích vì ta có thể thêm tên class vào phần tử đã có class hoặc id khác. Chỉ cần nhớ kiểu dáng nào liên kết với tên class nào trong dự án và thêm tên vào phần tử muốn định kiểu.

Cú pháp JavaScript thêm tên Class

Chúng ta sẽ xem hai cách thêm tên class vào phần tử. Nhớ từ phần trên là gói logic thêm class trong hàm là thực hành phổ biến. Khi đã có hàm, ta có thể gọi nó trong thuộc tính onClick HTML.

Cách đầu tiên thêm tên class dùng JavaScript thuần túy là qua thuộc tính className. Logic ở đây là chọn phần tử, rồi gọi .className trên phần tử được chọn. Sau đó có thể nối tên class vào phần tử.

81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.

Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.

Hãy bắt đầu với HTML:

<div id="div"> Hello World </div>
<button> Thêm Class </button>

Ở đây có <div> với id "div". Dưới <div> là nút. Nút này sẽ thêm tên class khi nhấp. Bây giờ xem ví dụ class CSS.

.background { background-color: blue; color: white; }

Trong tệp CSS, có class "background". Nó sẽ được định kiểu với màu nền xanh và văn bản trắng. Chúng ta muốn thêm tên class "background" vào <div> với id "div".

JavaScript có thể xử lý việc chọn <div> trong hàm, như sau:

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"
}

Hàm addClass sẽ chọn <div> bằng id "div". Ta lưu trong biến element. Từ đây, gọi thuộc tính className trên biến và nối tên class "background". Nhắc lại, nối chuỗi trong JavaScript thêm phần tử vào danh sách. Nói cách khác, nối tên class sẽ thêm tên class đó vào phần tử và các class đã định trước trên phần tử vẫn xuất hiện.

Chúng ta chưa xong! Vẫn phải gọi hàm addClass ở đâu đó. Hãy thêm tên class vào <div> sau khi nút được nhấp.

<div id="div"> Hello World </div>
<button onClick="addClass()"> Thêm Class </button>

Bằng cách dùng phương thức onClick của JavaScript, ta có thể gọi hàm sau khi nút được nhấp. Hãy thử bằng cách nhấp nút.

Để xem lại chuyện gì xảy ra, chúng ta đã thêm tên class "background" liên kết với kiểu dáng trong tệp CSS. Sau khi xây dựng hàm JavaScript tìm phần tử và thêm tên class, kiểu class được áp dụng cho <div> khi nút được nhấp.

Phương thức add() của JavaScript

Dùng cùng ví dụ trên, hãy xem cách khác để thêm tên class. Cách này dùng phương thức add() của JavaScript. Khác với ví dụ trên, ta dùng thuộc tính classList để gọi add().

Hàm addClass() bây giờ trông như sau:

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background")
}

Chúng ta vẫn lấy <div> bằng id và lưu trong biến. Sau đó gọi thuộc tính classList trên biến theo sau phương thức add(). Chúng ta truyền tên class "background" cho add() làm đối số.

<div> bây giờ có class "background" được thêm vào.

Chúng ta có cùng kết quả bằng cách viết mã theo hai cách khác nhau. Việc chọn cách triển khai trong mã là của bạn, nhưng phương pháp thứ hai được chấp nhận rộng rãi hơn như thực hành tốt nhất. Dùng add() được coi là thực hành tốt nhất vì ít gây lỗi hơn so với nối chuỗi.

Kết luận

Trong hướng dẫn này, chúng ta học cách thêm tên class vào phần tử. Điều này hữu ích khi bạn có class được định kiểu trong tệp CSS. Bằng cách thêm tên class vào phần tử HTML cụ thể, phần tử đó kế thừa kiểu dáng tìm thấy trong tệp CSS.

Bằng cách thay đổi động giao diện phần tử trên trang, chúng ta có thể mang lại trải nghiệm tương tác cho người dùng với ứng dụng. Khi viết ứng dụng tương tác, nó cảm thấy tự nhiên và hấp dẫn với người dùng. Nó sẽ khiến họ quay lại khám phá ứng dụng thêm.