Bài jQuery 17: Thêm và xóa các class CSS

0
178

Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn cách thêm và xóa các class CSS.

Thao tác với các class CSS

jQuery cung cấp một số phương thức, chẳng hạn như addClass(), removeClass(), toggleClass(), v.v. để thao tác với các class CSS được gán cho các phần tử HTML.

Phương thức addClass()

Phương thức addClass() của jQuery giúp bạn thêm một hoặc nhiều class vào các phần tử được chọn.

Ví dụ sau sẽ thêm class .page-header vào thẻ <h1> và class .highlight cho các phần tử <p> với class .hint khi nhấp vào nút.

Bạn cũng có thể thêm nhiều class vào các phần tử cùng một lúc. Chỉ cần xác định sự ngăn cách trong danh sách các class bên trong phương thức addClass(), như thế này:

Phương thức removeClass()

Tương tự, bạn có thể xóa các class khỏi các phần tử bằng cách sử dụng phương thức jQuery removeClass(). Phương thức removeClass() có thể xóa một, nhiều hoặc tất cả các class cùng một lúc khỏi các phần tử được chọn.

Ví dụ sau sẽ xóa class .page-header khỏi thẻ <h1> và class .hint.highlight khỏi các phần tử <p> khi nhấp vào nút.

Khi phương thức removeClass() được gọi mà không có đối số, nó sẽ xóa tất cả các class  khỏi các phần tử được chọn. Đây là một ví dụ:

Phương thức toggleClass()

Phương thức toggleClass() giúp bạn thêm hoặc xóa một hoặc nhiều class khỏi các phần tử được chọn theo cách mà nếu phần tử được chọn đã có class, thì nó sẽ bị xóa; nếu một phần tử không có class, thì nó được thêm vào.

Ví dụ:

Kết luận

Như vậy trong bài học ngày hôm nay mình đã giới thiệu đến các bạn cách Thêm và xóa các class CSS. Trong bào học tiếp theo chúng ta sẽ cùng nhau tìm hiểu về Get và Set các thuộc tính CSS.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây