Bí quyết thêm và loại bỏ lớp CSS bằng jQuery

Bí quyết thêm và loại bỏ lớp CSS bằng jQuery

Ngoài những phương pháp để xóa phần tử và thuộc tính, jQuery còn cung cấp các phương pháp để thêm và xóa các lớp CSS. Hãy tham khảo bài học jQuery dưới đây của Mytour để hiểu cách thêm và xóa các lớp CSS bằng jQuery.

1. Bí quyết thêm và loại bỏ lớp CSS bằng jQuery

jQuery cung cấp các phương pháp như addClass(), removeClass(), toggleClass(), ... để thao tác với các lớp CSS được áp dụng cho các phần tử HTML.

2. Phương pháp sử dụng addClass() trong jQuery

Phương pháp addClass() trong jQuery được sử dụng để thêm một hoặc nhiều lớp cho các phần tử được lựa chọn.

Ví dụ: Ví dụ dưới đây minh họa cách thêm lớp .page-header cho phần tử h1 và lớp .highlight cho phần tử p chứa lớp .hint khi click vào nút.

Kết quả xuất ra sẽ có dạng như sau:

Ngoài ra, ta cũng có thể thêm nhiều lớp cho nhiều phần tử khác nhau cùng một lúc. Chỉ cần xác định danh sách các lớp, phân tách bằng dấu cách trong phương thức addClass(), ví dụ như trong ví dụ dưới đây:

Kết quả xuất ra sẽ hiển thị như sau:

3. Sử dụng phương thức removeClass() trong jQuery

Tương tự, ta có thể dùng phương thức removeClass() trong jQuery để loại bỏ các lớp từ phần tử. Phương thức removeClass() có thể xóa một lớp, nhiều lớp hoặc toàn bộ các lớp cùng một lúc từ các phần tử đã chọn.

Ví dụ: Trong ví dụ dưới đây, xóa lớp .page-header khỏi phần tử h1, lớp .hint và lớp .highlight khỏi phần tử p khi click vào nút:

Kết quả xuất ra sẽ hiển thị như sau:

Nếu removeClass() được gọi mà không có đối số, nó sẽ xóa toàn bộ các lớp từ các phần tử đã chọn, ví dụ như trong đoạn mã dưới đây:

Kết quả xuất ra sẽ có dạng như sau:

4. Sử dụng phương thức toggleClass() trong jQuery

Phương pháp toggleClass() trong jQuery được dùng để thêm hoặc xóa một hoặc nhiều lớp từ các phần tử đã chọn. Nếu phần tử đã có lớp, phương thức sẽ xóa lớp đó; ngược lại, nếu phần tử không có lớp, phương thức sẽ thêm lớp cho phần tử đó.

Ví dụ: Dưới đây là ví dụ minh họa cách sử dụng phương thức toggleClass() trong jQuery để thêm hoặc xóa lớp từ phần tử đã chọn:

Kết quả xuất ra sẽ hiển thị như sau:

Trong bài giảng này, Mytour vừa hướng dẫn cách thêm và xóa các lớp CSS bằng jQuery. Trong bài giảng tiếp theo, Mytour sẽ hướng dẫn cách lấy và thiết lập thuộc tính CSS bằng jQuery. Nếu bạn có bất kỳ thắc mắc hoặc câu hỏi, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết.