jQuery lấy và đặt CSS lớp

Bằng jQuery, bạn có thể dễ dàng thực hiện các thao tác với các phần tử CSS.

jQuery thao tác CSS

jQuery có nhiều phương pháp để thực hiện các thao tác CSS. Chúng ta sẽ học các phương pháp sau:

  • addClass() - Thêm một hoặc nhiều lớp vào phần tử được chọn
  • removeClass() - Xóa bỏ một hoặc nhiều lớp từ phần tử được chọn
  • toggleClass() - Thực hiện việc thêm/xóa bỏ lớp của phần tử được chọn
  • css() - Đặt hoặc trả về thuộc tính樣式

Mô hình bảng樣式

Bảng樣式 dưới đây sẽ được sử dụng cho tất cả các ví dụ trong trang này:

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

Phương pháp jQuery addClass()

Ví dụ dưới đây trình bày cách thêm class thuộc tính cho các phần tử khác nhau. Tất nhiên, bạn cũng có thể chọn nhiều phần tử khi thêm lớp:

Mô hình

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Thử ngay

Bạn cũng có thể quy định nhiều lớp trong phương pháp addClass():

Mô hình

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Thử ngay

Phương pháp jQuery removeClass()

Ví dụ dưới đây trình bày cách xóa bỏ class thuộc tính cụ thể từ các phần tử khác nhau:

Mô hình

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Thử ngay

Phương pháp jQuery toggleClass()

Ví dụ dưới đây sẽ trình bày cách sử dụng phương pháp jQuery toggleClass(). Phương pháp này thực hiện việc thêm/xóa bỏ lớp của các phần tử được chọn:

Mô hình

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Thử ngay

Phương pháp jQuery css()

Chúng tôi sẽ giải thích phương pháp jQuery css() trong chương tiếp theo.

Hướng dẫn tham khảo jQuery HTML

Nếu bạn cần nội dung đầy đủ về phương pháp jQuery CSS, hãy truy cập trang web của chúng tôi Hướng dẫn tham khảo jQuery CSS