Jquery CSS class

05/10/2019

Bài sau » « Bài trước

Với jquery, Ta có thể dễ dàng thao tác style của 1 phần tử HTML. Và jquery cung cấp một số phương thức để thao tác với CSS như sau:

  • addClass() : Thêm 1 hoặc nhiều class vào phần tử được chọn.
  • removeClass() : Xóa 1 hoặc nhiều class từ phần tử được chọn.
  • toggleClass() : Phương thức kết hợp giữa add/remove class từ phần tử được chọn.
  • css() : Thiết lập hoặc trả về thuộc tính style.

Thiết lập class demo : Dùng để áp dụng cho các ví dụ bên dưới.

.bold{
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 các class cho các thành phần khác nhau. Tất nhiên bạn có thể chọn nhiều phần tử khi thêm các class:

$("button").click(function(){ $("h1, h2, p").addClass("blue"); // Thẻ h1, h2 và p đều được thêm class "blue" $("div").addClass("bold"); // Các thẻ div sẽ được thêm class "bold" });

Hoặc bạn có thể thêm nhiều class cho 1 phần tử:

$("button").click(function(){ $("h1").addClass("blue bold"); // Thẻ h1 được thêm class "blue bold" });

Phương thức jquery removeClass()

Ví dụ xóa class "blue" cho các thẻ h1, h2, p:

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

Phương thức jquery toggleClass()

Phương thức jquery toggleClass() là sự kết hợp giữa 2 phương thức addClass()removeClass().

Điều đó có nghĩa là : khi phần tử được chọn chưa có class thì nó sẽ được thêm vào, ngược lại khi phần tử được chọn đã có class rồi thì nó sẽ được xóa đi.

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

Giải thích ví dụ trên: Nếu các thẻ h1, h2, p chưa có class "blue", thì class "blue" được thêm vào, ngược lại nếu có thẻ h1, h2, p đã có class "blue" thì class "blue" sẽ bị xóa.

Phương thức jquery css()

Phương thức jquery css() thiết lập hoặc trả về nhiều thuộc tính css trong thuộc tính style của phần tử được chọn.

Để trả về giá trị của thuộc tính css chỉ định, ta sử dụng cú pháp như sau:

$(selector).css("tên thuộc tính");

Ví dụ:

<p style="background-color:#f00;font-size:20px;">Trả về thuộc tính css</p> <script> $("p").css("background-color"); // Giá trị trả về là mã rgb cho màu sắc: rgb(255,0,0) $("p").css("font-size"); // Giá trị trả về là : 20px </script>

Để thiết lập giá trị của thuộc tính css chỉ định, ta sử dụng cú pháp như sau:

$(selector).css("tên thuộc tính", "giá trị");

Ví dụ: Thiết lập tất cả thẻ <p> có background là màu vàng:

<p style="background-color:#f00;font-size:20px;">Trả về thuộc tính css</p> <script> $("p").css("background-color","yellow"); </script>

Để thiết lập nhiều thuộc tính css, ta sử dụng cú pháp như sau:

$(selector).css({"tên thuộc tính":"giá trị", "tên thuộc tính":"giá trị", ...});

Ví dụ:

$("p").css({"background-color":"yellow","font-size":"20px","font-weight":"bold"});

Bài sau » « Bài trước
Back to top