NTM Solutions

Thứ Tư, 25 tháng 1, 2017

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

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.