Việc thêm thuộc tính lớp vào một 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 một thuộc tính lớp được thêm vào một phần tử, phần tử được chọn đó sẽ giả định kiểu được liên kết với tên lớp đó.
Hãy nghĩ về một người dùng nhấp vào một nút. Khi nút được nhấp, chúng tôi muốn một phần của trang web thay đổi dựa trên biểu định kiểu CSS của chúng tôi. Chúng ta có thể gán một tên lớp được liên kết với kiểu dáng đó cho phần tử để thay đổi diện mạo của nó sau khi nút được nhấp.
Tạo trải nghiệm tương tác là điều quan trọng trong bất kỳ chương trình giao diện người dùng nào. Trong hướng dẫn này, chúng ta sẽ khám phá hai cách để thêm tên lớp vào một phần tử đã chọn trong JavaScript thuần túy. Cuối cùng, bạn sẽ có thể sử dụng công cụ này trong các dự án của riêng mình.
Cách sử dụng JavaScript Thêm lớp
Trong JavaScript, việc thêm tên lớp có thể được thực hiện theo một số cách. Đầu tiên, chúng tôi chọn phần tử HTML mong muốn. Sau đó, chúng tôi có lựa chọn sử dụng thuộc tính className hoặc add() để thêm tên lớp vào phần tử. Chúng ta sẽ xem xét cú pháp và sử dụng trong phần tiếp theo.
Hãy nhớ rằng, chúng tôi đang sử dụng JavaScript đơn giản ở đây. Không cần thư viện. Bởi vì chúng tôi đang sử dụng JavaScript thông thường, một phương pháp phổ biến là bọc logic ở trên bên trong một hàm và chuyển hàm đó đến một trình xử lý sự kiện. Điều này sẽ đảm bảo chức năng thêm tên lớp sẽ chỉ xảy ra sau khi một sự kiện cụ thể đã xảy ra.
Liên quan đến các phần tử HTML, chúng có thể có nhiều tên lớp. Điều này rất hữu ích để ghi nhớ vì chúng ta có thể thêm tên lớp vào các phần tử đã có tên hoặc id lớp khác. Tất cả những gì chúng ta phải ghi nhớ là kiểu dáng nào được liên kết với tên lớp nào trong dự án của chúng ta và thêm tên vào các phần tử mà chúng ta muốn tạo kiểu.
Cú pháp JavaScript để thêm tên lớp
Chúng ta sẽ xem xét hai cách để thêm tên lớp vào một phần tử. Hãy nhớ từ phần trên rằng gói logic để thêm một lớp bên trong một hàm là một thực tế phổ biến. Khi chúng ta đã xây dựng xong hàm của mình, chúng ta có thể gọi nó bên trong thuộc tính HTML onClick.
Cách đầu tiên để thêm tên lớp bằng JavaScript thuần túy là đi qua thuộc tính className. Logic ở đây là chọn phần tử, sau đó gọi .className trên phần tử được chọn. Sau đó, chúng ta có thể nối tên lớp với phần tử.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã 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 công việc đầu tiên của họ.
Hãy bắt đầu với HTML của chúng tôi:
<div id="div"> Hello World </div> <button> Add Class </button>
Ở đây chúng ta có một
.background {
background-color: blue;
color: white;
} Trong tệp CSS của chúng tôi, chúng tôi có lớp “nền”. Ở đây, nó sẽ được tạo kiểu với màu nền xanh lam và chữ sẽ có màu trắng. Chúng tôi muốn thêm tên lớp “background” vào
JavaScript có thể xử lý việc chọn
const addClass = () => {
const element = document.getElementById('div');
element.className += "background"
} Hàm của chúng ta có tên là addClass sẽ chọn
Chúng tôi vẫn chưa hoàn thành! Chúng ta vẫn phải gọi hàm addClass của mình ở đâu đó. Hãy thêm tên lớp vào
<div id="div"> Hello World </div> <button onClick="addClass()"> Add Class </button>
Bằng cách sử dụng phương thức JavaScript onClick, chúng ta có thể gọi hàm của mình sau khi nhấp vào nút. Hãy kiểm tra nó bằng cách nhấp vào nút.
Để xem lại những gì vừa xảy ra, chúng tôi đã thêm tên lớp “background” được liên kết với kiểu trong tệp CSS của chúng tôi. Sau khi chúng tôi tạo một hàm JavaScript để tìm phần tử và thêm tên lớp, kiểu lớp đã được áp dụng cho
Phương thức add () JavaScript
Sử dụng ví dụ tương tự như trên, hãy xem cách khác để thêm tên lớp. Điều này liên quan đến việc sử dụng JavaScript add() phương pháp. Không giống như ví dụ trên, chúng tôi sử dụng thuộc tính classList để gọi add() .
addClass() của chúng tôi chức năng bây giờ trông như thế này:
const addClass = () => {
const element = document.getElementById('div');
element.classList.add("background")
} Chúng tôi vẫn đang lấy
add() phương pháp. Chúng tôi chuyển tên lớp “background” cho add() như một lập luận.
Chúng tôi nhận được cùng một kết quả bằng cách mã hóa nó theo hai cách khác nhau. Việc lựa chọn cái nào để triển khai trong mã của bạn 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ư là phương pháp hay nhất. Sử dụng add() được coi là phương pháp hay nhất vì nó ít bị lỗi hơn so với việc sử dụng phép nối.
Kết luận
Trong hướng dẫn này, chúng ta đã học cách thêm tên lớp vào một phần tử. Điều này rất hữu ích khi bạn có một lớp được tạo kiểu trong tệp CSS. Bằng cách thêm tên lớp vào một phần tử HTML cụ thể, phần tử đó sẽ kế thừa kiểu được tìm thấy trong tệp CSS.
Bằng cách thay đổi động giao diện của các phần tử trên trang, chúng tôi có thể mang đến cho người dùng trải nghiệm tương tác với ứng dụng của chúng tôi. Khi chúng tôi viết các ứng dụng tương tác, nó mang lại cảm giác tự nhiên và hấp dẫn cho người dùng. Nó sẽ khiến họ quay lại để khám phá thêm ứng dụng của chúng tôi.