jQuery hoạt động CSS - phương thức css()

Hướng dẫn thực hiện CSS bằng jQuery

Mẫu

Đặt màu của phần tử <p>:

$(".btn1").click(function(){
  $("p").css("color","red");
});

Thử ngay

Định nghĩa và cách sử dụng

Phương thức css() trả về hoặc đặt một hoặc nhiều thuộc tính phong cách của phần tử khớp.

Trả về giá trị thuộc tính CSS

Trả về giá trị thuộc tính CSS của phần tử khớp đầu tiên.

Ghi chú:Khi được sử dụng để trả về một giá trị, các thuộc tính CSS viết tắt không được hỗ trợ (ví dụ: "background" và "border").

$(selector).css(name)
Tham số Mô tả
name Bắt buộc. Định nghĩa tên thuộc tính CSS. Các tham số này có thể chứa bất kỳ thuộc tính CSS nào. Ví dụ: "color".

Mẫu

Lấy giá trị thuộc tính phong cách color của đoạn đầu tiên:

$("p").css("color");

Thử ngay

Đặt thuộc tính CSS

Thiết lập thuộc tính CSS cụ thể cho tất cả các phần tử khớp.

$(selector).css(name,value)
Tham số Mô tả
name Bắt buộc. Định nghĩa tên thuộc tính CSS. Tham số này có thể chứa bất kỳ thuộc tính CSS nào, ví dụ "color".
value

Tùy chọn. Định nghĩa giá trị thuộc tính CSS. Tham số này có thể chứa bất kỳ giá trị thuộc tính CSS nào, ví dụ "red".

Nếu giá trị rỗng được thiết lập, thuộc tính sẽ bị xóa khỏi phần tử.

Mẫu

Đặt màu của tất cả các đoạn văn bản thành đỏ:

$("p").css("color","red");

Thử ngay

Thiết lập thuộc tính phong cách bằng hàm

Thiết lập giá trị thuộc tính phong cách của tất cả các phần tử khớp.

Hàm này trả về giá trị cần thiết lập thuộc tính. Chấp nhận hai tham số, index là vị trí của phần tử trong tập hợp đối tượng, value là giá trị thuộc tính ban đầu.

$(selector).css(name,function(index,value))
Tham số Mô tả
name Bắt buộc. Định nghĩa tên thuộc tính CSS. Tham số này có thể chứa bất kỳ thuộc tính CSS nào, ví dụ "color".
function(index,value)

Định nghĩa hàm trả về giá trị mới của thuộc tính CSS.

  • index - tùy chọn. Chấp nhận vị trí index của chọn lọc
  • oldvalue - tùy chọn. Chấp nhận giá trị hiện tại của thuộc tính CSS.

Mẫu 1

Đặt màu của tất cả các đoạn văn bản thành đỏ:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

Thử ngay

Mẫu 2

Tăng dần độ rộng của div:

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

Thử ngay

Thiết lập nhiều cặp thuộc tính/giá trị CSS

$(selector).css({property:value, property:value, ...})

Thiết lập đối tượng "tên/giá trị" của thuộc tính phong cách cho tất cả các phần tử khớp.

Đây là cách tốt nhất để thiết lập nhiều thuộc tính phong cách trên tất cả các phần tử khớp.

Tham số Mô tả
{property:value}

Bắt buộc. Định nghĩa đối tượng "tên/giá trị" của thuộc tính phong cách cần thiết lập.

Tham số này có thể chứa nhiều cặp tên thuộc tính/giá trị CSS. Ví dụ {"color":"red","font-weight":"bold"}

Mẫu

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

Thử ngay

Hướng dẫn thực hiện CSS bằng jQuery