Phương thức lấy và thiết lập các thuộc tính CSS trong jQuery

Bài học trước Taimienphi.vn đã hướng dẫn bạn cách thêm và xóa các lớp CSS bằng jQuery, trong bài học dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn phương thức lấy và thiết lập các thuộc tính CSS trong jQuery nhé.

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery

Phương thức lấy và thiết lập các thuộc tính CSS trong jQuery

Trong bài học jQuery dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn phương thức lấy và thiết lập các thuộc tính CSS trong jQuery. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học khác đã có trên Taimienphi.vn để tìm hiểu thêm về cách chèn nội dung vào tài liệu HTML bằng jQuery.

Mục Lục bài viết:
1. Phương thức css() trong jQuery
2. Lấy giá trị thuộc tính CSS
3. Thiết lập thuộc tính và giá trị CSS duy nhất cho các phấn tử
4. Thiết lập nhiều thuộc tính và giá trị CSS cho các phần tử

 

1. Phương thức css() trong jQuery

Phương thức css() trong jQuery được sử dụng để lấy giá trị tính toán của thuộc tính CSS hoặc thiết lập một hoặc nhiều thuộc tính CSS cho các phần tử được chọn.

Bằng cách sử dụng phương thức này chúng ta có thể áp dụng các style trực tiếp cho các phần tử HTML (tức là inline style) chưa được áp dụng hoặc khó có thể xác định trong stylesheet.

 

2. Lấy giá trị thuộc tính CSS

Để lấy giá trị tính toán của thuộc tính CSS của một phần tử, chúng ta sử dụng tên thuộc tính làm tham số cho phương thức css().

Cú pháp cơ bản có dạng như dưới đây:

$(selector).css("propertyName");

Ví dụ: trong ví dụ dưới đây sẽ truy xuất và hiển thị giá trị tính toán của thuộc tính CSS background-color của phần tử div khi chúng ta click chọn:

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery

Kết quả đầu ra có dạng như dưới đây:

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery 2

 

3. Thiết lập thuộc tính và giá trị CSS duy nhất cho các phần tử

Phương thức css() trong jQuery có thể lấy tên và giá trị thuộc tính làm tham số riêng để thiết lập thuộc tính CSS duy nhất cho các phần tử.

Cú pháp cơ bản có dạng như dưới đây:

$(selector).css("propertyName", "value");

Ví dụ: trong ví dụ dưới đây minh họa cách thiết lập thuộc tính CSS background-color cho các phần tử div thành giá trị red (màu đỏ) khi chúng ta click chọn:

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery 3

Kết quả đầu ra có dạng như dưới đây:

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery 4

 

4. Thiết lập nhiều thuộc tính và giá trị CSS

Ngoài ra chúng ta cũng có thể sử dụng phương thức css() để thiết lập nhiều thuộc tính CSS.

Cú pháp cơ bản thiết lập nhiều thuộc tính cho các phần tử có dạng như dưới đây:

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery 5

Ví dụ: ví dụ đưới đây minh họa cách thiết lập thuộc tính CSS background-color cũng như padding cho nhiều phần tử được chọn cùng lúc:

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery 6

Kết quả đầu ra có dạng như dưới đây:

phuong thuc lay va thiet lap cac thuoc tinh css trong jquery 7

https://thuthuat.taimienphi.vn/phuong-thuc-lay-va-thiet-lap-cac-thuoc-tinh-css-trong-jquery-52290n.aspx
Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách lấy và thiết lập các thuộc tính CSS bằng phương thức css() trong jQuery. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách thiết lập kích thước cho phần tử trong jQuery. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Tin Nguyễn     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Hàm callback trong jQuery
Học jQuery, tài liệu tự học lập trình jQuery
Hiệu ứng động trong jQuery
Tìm hiểu Chaining trong jQuery
Hiệu ứng Fade in và Fade out trong jQuery
Từ khoá liên quan:

Phương thức thiết lập các thuộc tính CSS trong jQuery

, thiết lập các thuộc tính CSS bằng jQuery, jQuery,

SOFT LIÊN QUAN
  • jQuery Treeview Plugin

    Hỗ trợ quản lý thư mục jQuery

    jQuery Treeview Plugin là tiện ích mở rộng hữu ích cho người dùng thường xuyên làm việc với jQuery. Download jQuery Treeview Plugin giúp bạn quản lý các file jQuery dễ dàng hơn nhờ việc phân cấp cây thư mục một cách khoa ...

Tin Mới