jQuery - Nhận và đặt các lớp CSS
Với jQuery, thật dễ dàng để thao tác kiểu 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 phần tử đã chọnremoveClass()- Loại bỏ một hoặc nhiều lớp khỏi các phần tử đã chọntoggleClass()- Chuyển đổi giữa việc thêm / xóa các lớp khỏi các phần tử đã chọncss()- Đặ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 jQuery addClass ()
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 các lớp:
Thí dụ
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Bạn cũng có thể chỉ định nhiều lớp trong addClass()phương thức:
Thí dụ
$("button").click(function(){
$("#div1").addClass("important blue");
});
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:
Thí dụ
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
Phương thức jQuery toggleClass ()
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 phần tử đã chọn:
Thí dụ
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
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 jQuery
Để có cái nhìn tổng quan đầy đủ về tất cả các phương thức CSS jQuery, vui lòng truy cập Tham chiếu HTML / CSS jQuery của chúng tôi .