Cập nhật các lớp bằng JavaScript
JavaScript cung cấp các công cụ mạnh mẽ để tương tác và thao tác linh hoạt với các phần tử HTML. Một nhiệm vụ phổ biến là thay đổi lớp của phần tử HTML để phản hồi các sự kiện như onclick.
Hướng dẫn này sẽ trình bày cách sử dụng JavaScript để thay đổi lớp của một phần tử, cho phép thay đổi kiểu dáng và hành vi động trên các trang web của bạn. Cho dù bạn đang phản hồi với một cú nhấp chuột hay một sự kiện khác, những kỹ thuật này sẽ nâng cao kỹ năng phát triển web của bạn.
| Yêu cầu | Sự miêu tả |
|---|---|
| className | Đặt hoặc trả về thuộc tính lớp của một phần tử. Được sử dụng để thay đổi lớp của phần tử. |
| getElementById | Trả về phần tử có thuộc tính ID với giá trị được chỉ định. Được sử dụng để chọn phần tử nút. |
| onclick | Đặt chức năng được thực thi khi xảy ra sự kiện nhấp chuột trên phần tử. |
| removeClass | Xóa một hoặc nhiều tên lớp khỏi các thành phần đã chọn trong jQuery. |
| addClass | Thêm một hoặc nhiều tên lớp vào các thành phần đã chọn trong jQuery. |
| $ | Bí danh cho jQuery, được sử dụng để chọn các phần tử và thực hiện các hành động trên chúng. |
Hiểu thao tác lớp JavaScript
Các tập lệnh được cung cấp minh họa cách thay đổi lớp của phần tử HTML bằng cách sử dụng JavaScript và jQuery để phản hồi sự kiện nhấp chuột. Trong tập lệnh đầu tiên, JavaScript đơn giản được sử dụng để đạt được chức năng này. Các getElementById phương thức được sử dụng để chọn thành phần nút có ID 'myButton'. Các onclick sự kiện sau đó được gán cho phần tử này, chỉ định chức năng sẽ được thực thi khi nhấp vào nút. Bên trong chức năng này, nút className thuộc tính được đặt thành 'đã thay đổi', thay đổi lớp của nó và sau đó là kiểu của nó như được xác định trong CSS. Tập lệnh này thể hiện một cách hiệu quả tính đơn giản và trực tiếp của việc sử dụng JavaScript đơn giản để thao tác DOM.
Tập lệnh thứ hai minh họa chức năng tương tự bằng cách sử dụng jQuery, một thư viện JavaScript phổ biến giúp đơn giản hóa việc duyệt và thao tác tài liệu HTML. Ở đây, bí danh jQuery $ được sử dụng để chọn phần tử nút. Các click Sau đó, phương thức này được áp dụng để thiết lập trình xử lý sự kiện cho sự kiện nhấp chuột. Trong trình xử lý này, lớp của nút được sửa đổi bằng jQuery removeClass Và addClass phương pháp. Các phương thức này cung cấp một cách thuận tiện để thao tác các lớp của phần tử, mang lại cách tiếp cận ngắn gọn và dễ đọc hơn so với JavaScript thuần túy. Cả hai tập lệnh đều nhằm mục đích chứng minh cách các công cụ khác nhau có thể đạt được cùng một mục tiêu là thay đổi động lớp của một phần tử dựa trên tương tác của người dùng.
Thay đổi lớp của phần tử khi nhấp chuột bằng JavaScript
JavaScript và HTML
// HTML<!DOCTYPE html><html><head><title>Change Class Example</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script>document.getElementById('myButton').onclick = function() {this.className = 'changed';};</script></body></html>
Cập nhật lớp của phần tử HTML bằng jQuery
JavaScript với jQuery
// HTML<!DOCTYPE html><html><head><title>Change Class with jQuery</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#myButton').click(function() {$(this).removeClass('original').addClass('changed');});</script></body></html>
Các kỹ thuật nâng cao để thao tác lớp trong JavaScript
Ngoài những thay đổi lớp cơ bản để đáp ứng với các sự kiện, JavaScript còn cung cấp các kỹ thuật nâng cao hơn để thao tác danh sách lớp của một phần tử. Một phương pháp như vậy là classList thuộc tính, cung cấp một cách linh hoạt và mạnh mẽ hơn để làm việc với các lớp. Các classList thuộc tính trả về bộ sưu tập DOMTokenList trực tiếp gồm các thuộc tính lớp của phần tử. sử dụng classList, bạn có thể thêm, xóa, chuyển đổi và kiểm tra các lớp mà không ảnh hưởng đến các lớp khác có thể được áp dụng cho phần tử.
Ví dụ, add phương thức có thể được sử dụng để thêm một hoặc nhiều lớp vào một phần tử, trong khi phương thức remove phương thức có thể loại bỏ một hoặc nhiều lớp được chỉ định. Các toggle Phương thức này đặc biệt hữu ích vì nó thêm lớp nếu nó không tồn tại và loại bỏ nó nếu có, khiến nó trở nên lý tưởng cho các tác vụ như thực hiện chuyển đổi chế độ tối. Ngoài ra, contains phương thức này kiểm tra xem phần tử có chứa một lớp cụ thể hay không, điều này có thể hữu ích cho việc áp dụng có điều kiện các kiểu hoặc hành vi dựa trên trạng thái hiện tại của một phần tử.
Câu hỏi thường gặp về thao tác lớp JavaScript
- Làm cách nào để thêm nhiều lớp vào một phần tử?
- Sử dụng classList.add phương thức có nhiều đối số: element.classList.add('class1', 'class2').
- Tôi có thể xóa tất cả các lớp khỏi một phần tử không?
- Có, bạn có thể sử dụng className thuộc tính và đặt nó thành một chuỗi trống: element.className = ''.
- Sự khác biệt giữa className Và classList?
- className đặt hoặc lấy toàn bộ thuộc tính lớp, trong khi classList cho phép thao tác chi tiết hơn với các lớp.
- Làm cách nào để kiểm tra xem một phần tử có một lớp cụ thể không?
- Sử dụng classList.contains phương pháp: element.classList.contains('classname').
- Làm cách nào để chuyển đổi một lớp trên một phần tử?
- Sử dụng classList.toggle phương pháp: element.classList.toggle('classname').
- Tôi có thể sử dụng jQuery để thao tác với các lớp không?
- Có, jQuery cung cấp các phương thức như addClass, removeClass, Và toggleClass.
- DOMTokenList trực tiếp là gì?
- MỘT DOMTokenList là một bộ sưu tập trực tiếp tự động cập nhật khi thuộc tính lớp của phần tử thay đổi.
- Là classList được hỗ trợ trong tất cả các trình duyệt?
- classList được hỗ trợ trong tất cả các trình duyệt hiện đại, nhưng các phiên bản Internet Explorer cũ hơn có thể không hỗ trợ đầy đủ.
- Làm cách nào tôi có thể tự động thêm các lớp dựa trên các điều kiện?
- Bạn có thể dùng if phát biểu kết hợp với classList.add hoặc classList.remove để áp dụng các lớp học có điều kiện.
Các kỹ thuật chính để thay đổi lớp động
Các tập lệnh được cung cấp minh họa cách thay đổi lớp của phần tử HTML bằng cách sử dụng JavaScript và jQuery để phản hồi sự kiện nhấp chuột. Trong tập lệnh đầu tiên, JavaScript đơn giản được sử dụng để đạt được chức năng này. Các getElementById phương thức được sử dụng để chọn thành phần nút có ID 'myButton'. Các onclick sự kiện sau đó được gán cho phần tử này, chỉ định chức năng sẽ được thực thi khi nhấp vào nút. Bên trong chức năng này, nút className thuộc tính được đặt thành 'đã thay đổi', thay đổi lớp của nó và sau đó là kiểu của nó như được xác định trong CSS. Tập lệnh này thể hiện một cách hiệu quả tính đơn giản và trực tiếp của việc sử dụng JavaScript đơn giản để thao tác DOM.
Tập lệnh thứ hai minh họa chức năng tương tự bằng cách sử dụng jQuery, một thư viện JavaScript phổ biến giúp đơn giản hóa việc duyệt và thao tác tài liệu HTML. Ở đây, bí danh jQuery $ được sử dụng để chọn phần tử nút. Các click Sau đó, phương thức này được áp dụng để thiết lập trình xử lý sự kiện cho sự kiện nhấp chuột. Trong trình xử lý này, lớp của nút được sửa đổi bằng jQuery removeClass Và addClass phương pháp. Các phương thức này cung cấp một cách thuận tiện để thao tác các lớp của phần tử, mang lại cách tiếp cận ngắn gọn và dễ đọc hơn so với JavaScript thuần túy. Cả hai tập lệnh đều nhằm mục đích chứng minh cách các công cụ khác nhau có thể đạt được cùng một mục tiêu là thay đổi động lớp của một phần tử dựa trên tương tác của người dùng.
Tóm tắt những điểm chính
Thao tác với lớp của một phần tử HTML bằng JavaScript hoặc jQuery cung cấp một cách đơn giản để cập nhật kiểu dáng và hành vi của phần tử một cách linh hoạt. Bằng cách hiểu và sử dụng các phương pháp như className, classListvà các phương thức thao tác lớp của jQuery, các nhà phát triển có thể nâng cao tính tương tác và khả năng phản hồi của các trang web của họ, khiến chúng trở nên hấp dẫn hơn đối với người dùng.