jQuery Manipulating 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 thức sau:

• addClass() - Thêm một hoặc nhiều class vào phần tử được chọn
• removeClass() - Xóa một hoặc nhiều class khỏi phần tử được chọn
• toggleClass() - Toggle giữa việc thêm/xóa các class khỏi phần tử được chọn
• css() - Đặt hoặc trả về thuộc tính style css

Example Stylesheet

Stylesheet sau đây sẽ được sử dụng cho tất cả các ví dụ trong bài này:

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

.blue {
  color: blue;
}

jQuery addClass()

Ví dụ sau đây minh họa cách thêm các class cho 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 class:

Ví 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 phương thức addClass():

Ví dụ

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

jQuery removeClass()

Ví dụ sau đây cho thấy cách loại bỏ một class cụ thể khỏi các phần tử khác nhau:

Ví dụ

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

jQuery toggleClass()

Ví dụ sau đây sẽ cho thấy cách sử dụng phương thức toggleClass() - toggle giữa việc thêm/xóa các class khỏi phần tử được chọn:

Ví dụ

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