jQuery - Nhận và thiết lập các lớp CSS
Với jQuery, thật dễ dàng để thao tác kiểu dáng của các phần tử.
jQuery thao tác CSS
jQuery có một số phương thức để thao tác CSS. Chúng ta sẽ xem xét các phương pháp sau:
-
addClass()
- Thêm một hoặc nhiều lớp vào các thành phần đã chọn -
removeClass()
- Xóa một hoặc nhiều lớp khỏi các thành phần đã chọn -
toggleClass()
- Chuyển đổi giữa việc thêm/xóa các lớp khỏi các thành phần đã chọn -
css()
- Đặt hoặc trả về thuộc tính style
Biểu định kiểu mẫu
Biểu định kiểu sau sẽ được sử dụng cho tất cả các ví dụ trên trang này:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
Phương thức addClass() của jQuery
Ví dụ sau đây cho thấy cách thêm thuộc tính lớp vào các phần tử khác nhau. Tất nhiên bạn có thể chọn nhiều phần tử khi thêm lớp:
Ví dụ
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Hãy tự mình thử » Bạn cũng có thể chỉ định nhiều lớp trong phương thức addClass()
:
Phương thức jQuery RemoveClass()
Ví dụ sau đây cho thấy cách xóa một thuộc tính lớp cụ thể khỏi các phần tử khác nhau:
Phương thức switchClass() của jQuery
Ví dụ sau đây sẽ chỉ ra cách sử dụng phương thức jQuery toggleClass()
. Phương thức này chuyển đổi giữa việc thêm/xóa các lớp khỏi các thành phần đã chọn:
Phương thức jQuery css()
Phương thức jQuery css()
sẽ được giải thích trong chương tiếp theo.
bài tập jQuery
Tham chiếu CSS của jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các phương thức CSS của jQuery, vui lòng truy cập Tài liệu tham khảo HTML/CSS jQuery của chúng tôi.