Tự học JQuery - HTML - Bài 5 - JQuery Get và Set lớp CSS

Xem Mục lục lập trình JQuery

Dùng jQuery xử lý các phần tử CSS thật dễ dàng.

jQuery xử lý CSS

jQuery có rất nhiều phương thức xử lý CSS:

• addClass() - Thêm 01 hoặc nhiều lớp trong các phần tử đã chọn.
• removeClass() - Xóa 01 hoặc nhiều lớp trong các phần tử đã chọn.
• toggleClass() - Chuyển đổi qua lại giữa thêm/xóa lớp trong các phần tử đã chọn.
• css() - Thiết lập hoặc trả về thuộc tính style.
  

---

Ví dụ Stylesheet


Mẫu stylesheet sau đây sẽ được sử dụng cho tất 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 cho ta biết cách thêm thuộc tính của lớp trong nhiều phần tử.

Bạn có thể tùy ý chọn nhiều phần tử khi thêm lớp.

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

Bạn cũng có thể thêm thuộc tính của nhiều lớp bằng phương thức addClass()

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

Phương thức jQuery removeClass()

Ví dụ sau cho ta biết cách xóa 01 thuộc tính của lớp trong nhiều phần tử.

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

Phương thức jQuery toggleClass()

Ví dụ sau sẽ hướng dẫn cách sử dụng phương thức jQuery toggleClass()

Phương thức này chuyển đổi qua lại giữa thêm/xóa các lớp trong các phần tử đã chọn:

$("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 bài tiếp theo.

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM