Ở đây trong hướng dẫn này, chúng tôi đã giải thích chi tiết về phương pháp này, hơn nữa, chúng tôi đã trình bày các ví dụ khác nhau giúp bạn hiểu rõ hơn về phương pháp và cách sử dụng phương pháp này

Phương thức css()

Phương thức css() trong jQuery được sử dụng cho mục đích tìm nạp hoặc áp dụng một hoặc nhiều thuộc tính kiểu cho phần tử HTML

cú pháp

Để áp dụng thuộc tính CSS

css("thuộc tính", "giá trị");

Để tìm nạp một thuộc tính CSS

css ("thuộc tính");

Để áp dụng nhiều thuộc tính CSS

css ({"thuộc tính". "giá trị", "thuộc tính". "giá trị" . });

Để hiểu rõ hơn về phương thức css(), hãy khám phá một số ví dụ

ví dụ 1. Cách đặt thuộc tính CSS

Suppose you want to set the background color of a

element using the css() method in jQuery.

HTML

< h1 > Đặt thuộc tính CSS h1>

<br><button class="button">Set background-color of h1button>

In the above HTML code, we have created an

, and a element.

jQuery

$ ( tài liệu ) . sẵn sàng (chức năng() . nút"

  $(".button") . nhấp (chức năng() . css

    $("h1").css("màu nền" , "màu vàng");

  });

});

In the above jQuery code, we have applied a yellow background color to the

element using the css() method.

đầu ra

Trước khi nhấp vào nút

Sau khi nhấp vào nút

Màu nền của tiêu đề đã được đặt thành công

Cách tìm nạp thuộc tính CSS

Giả sử bạn muốn tìm nạp bất kỳ thuộc tính CSS nào của một phần tử, chẳng hạn như màu nền của phần tử div. Thực hiện theo mã dưới đây

HTML

  < kiểu div ="padding. 25px; . 200px; . bisque;"> Xin chào thế giới div >

  <br><button>Return background-color of divbutton>

Here we have created a

, and a

element.

jQuery

$ ( tài liệu ) . sẵn sàng (chức năng() . nhấp

  $("button").click(chức năng() . css

    alert("Background color = " + $("div").css("background-color"));

  });

});

In the above code, the css() method is used only to extract the background color assigned to the

element. Moreover, an alert message has been created that will display the background color of the div.

đầu ra

Màu nền của phần tử div đã được tìm nạp và hiển thị thành công

Cách đặt nhiều thuộc tính CSS

Giả sử bạn muốn gán nhiều thuộc tính kiểu cho bất kỳ phần tử HTML nào cùng một lúc. Làm theo ví dụ dưới đây

HTML

< p > Đoạn văn. p >

<br><button>Set multiple stylesbutton>

In the above code, we have created a

element along with a

element.

jQuery

$ ( tài liệu ) . sẵn sàng (chức năng() . nhấp

  $("button").click(chức năng() . css

    $("p").css({"background-color" . "vàng" , "đệm" . "25px" , "chiều rộng" . "200px"}) ;

  });

});

Using the jQuery css() method we have applied a background color to the

element and assigned it some padding and width.

đầu ra

Có thể xác minh từ đầu ra ở trên rằng nhiều kiểu được áp dụng cho đoạn văn cùng một lúc

Phần kết luận

Bạn có thể thay đổi CSS bằng phương thức jQuery css() được sử dụng cho mục đích lấy hoặc thiết lập các thuộc tính kiểu của một phần tử. Sử dụng phương pháp này, bạn có thể áp dụng nhiều kiểu cho HTML cùng một lúc bằng cách thao tác các thuộc tính kiểu CSS. Hướng dẫn này hướng dẫn bạn cách thay đổi CSS theo nhiều cách khác nhau thông qua phương thức jQuery css() cùng với các ví dụ liên quan để bạn hiểu rõ hơn

Jquery CSS là gì?

Phương thức jQuery CSS() được dùng để lấy (trả về) hoặc đặt các thuộc tính hoặc giá trị kiểu cho các phần tử được chọn . Nó tạo điều kiện cho bạn có được một hoặc nhiều thuộc tính kiểu.

jQuery có thể được sử dụng trong CSS không?

Ngoài ra, jQuery cũng có thể diễn giải định dạng CSS và DOM của thuộc tính nhiều từ . Ví dụ: jQuery hiểu và trả về giá trị chính xác cho cả hai. css("màu nền") và. css("màu nền").

CSS hay jQuery cái nào tốt hơn?

Sự khác biệt là gì? . Tuy nhiên jQuery thường tương thích ngược hơn CSS . Điều đó nói rằng, chuyển đổi CSS sẽ trở lại jQuery nếu trình duyệt không hỗ trợ chuyển đổi CSS.

Làm cách nào để đặt giá trị CSS trong jQuery?

Đặt một giá trị và thuộc tính CSS đơn . Cú pháp cơ bản có thể được đưa ra với. $(bộ chọn). css("Tên thuộc tính", "giá trị");