Nối CSS trong jQuery
|
Trong bài viết này, chúng ta sẽ khám phá cách chúng ta có thể áp dụng các kiểu CSS cho các phần tử HTML. Bạn nên có một số kiến thức cơ bản về HTML, CSS, JavaScript và jQuery trước khi bắt đầu bài viết này Show Có thể thay đổi thuộc tính CSS của một phần tử bằng cách sử dụng API JavaScript đơn giản, nhưng chúng tôi cố gắng hoàn thành thử thách này bằng phương thức jQuery css(). cú pháp $().css(propertyname, value); $().css(properties); Có nhiều loại phương thức CSS, có nghĩa là mỗi phương thức có tên giống nhau nhưng có các tham số khác nhau. Chúng tôi sẽ chỉ thảo luận về hai phương pháp, một trong số đó được sử dụng để thay đổi một thuộc tính CSS duy nhất, trong khi phương pháp kia được sử dụng để thay đổi đồng thời nhiều thuộc tính CSS. Với phương thức thứ hai, bạn có thể truyền đối tượng chuỗi JSON làm tham số mà bạn muốn áp dụng cho phần tử HTML. Các đối tượng chuỗi JSON chứa các thuộc tính CSS cùng với các giá trị của chúng và phương thức đầu tiên chỉ nhận 2 tham số, đó là tên thuộc tính và giá trị Ví dụ. Bằng cách nhấp vào nút, nó sẽ thêm nhiều thuộc tính CSS vào thành phần đã chọn, nhưng bằng cách nhấp đúp vào nút, nó chỉ thêm một thuộc tính CSS. Mục đích của ví dụ này là để hiển thị việc sử dụng hai loại phương thức CSS được thảo luận. Phương thức css() trong jQuery dùng để thay đổi thuộc tính style của phần tử được chọn. Phương pháp này có thể được sử dụng theo nhiều cách khác nhau. Phương thức css() có thể được sử dụng để lấy/trả về giá trị hiện tại của thuộc tính cho phần tử được chọn cú pháp $(selector).css(property) hoặc $(selector).css(property, value) hoặc $(selector).css(property, function(index, currentvalue)) hoặc $(selector).css({property:value, property:value, ...})Giá trị trả về. Nó sẽ trả về giá trị của thuộc tính cho phần tử được chọn. ví dụ 1. Trong ví dụ này, chúng ta sẽ sử dụng phương thức css() để lấy màu văn bản của thành phần đoạn văn HTML$(selector).css(property)22 $(selector).css(property)23 $(selector).css(property)24 $(selector).css(property)25
$(selector).css(property)23 $(selector).css(property)27 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property, value)3 $(selector).css(property, value)4 $(selector).css(property, value)5 $(selector).css(property, value)6 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property, value)9____23 $(selector).css(property)25 $(selector).css(property, value)9 $(selector).css(property)27____125
_______123____36____125 _______21____123____40 $(selector).css(property)25 $(selector).css({property:value, property:value, ...})2$(selector).css({property:value, property:value, ...})3$(selector).css({property:value, property:value, ...})4$(selector).css({property:value, property:value, ...})5$(selector).css(property, value)1 $(selector).css(property, value)9____40 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property)222 $(selector).css(property)223 $(selector).css(property, value)5 $(selector).css(property)225 $(selector).css(property)226 $(selector).css(property)222 $(selector).css(property)25 $(selector).css(property, value)9____36____125 $(selector).css(property)23 $(selector).css(property, value)3____125 $(selector).css(property, value)1____1236
_______42____1238 _______42____1240
$(selector).css(property)241____1242 $(selector).css(property)241 $(selector).css(property)244 $(selector).css(property)241____1246 _______42____1248 $(selector).css(property, value)1____1248 $(selector).css(property, value)9 $(selector).css(property, value)3 $(selector).css(property)25
$(selector).css(property, value)9 $(selector).css(property)24 $(selector).css(property)25 đầu ra.
ví dụ 2. Trong ví dụ này, chúng ta sẽ sử dụng phương thức css() để thay đổi kiểu CSS của phần tử được chọn HTML$(selector).css(property)22 $(selector).css(property)23 $(selector).css(property)24 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property)27 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property, value)3 $(selector).css(property, value)4 $(selector).css(property, value)5 $(selector).css(property, value)6 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property, value)9____23 $(selector).css(property)25 $(selector).css(property, value)9 $(selector).css(property)27____125
_______123____36____125 _______21____123____40 $(selector).css(property)25 $(selector).css({property:value, property:value, ...})2$(selector).css(property, value)07 $(selector).css({property:value, property:value, ...})4$(selector).css(property, value)09 $(selector).css(property, value)1 $(selector).css(property, value)9____40 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property)222 $(selector).css(property, value)17 $(selector).css(property)241 $(selector).css(property, value)19 $(selector).css({property:value, property:value, ...})2$(selector).css(property, value)21 $(selector).css(property, value)1 $(selector).css(property, value)9____1222 $(selector).css(property)25 $(selector).css(property, value)9____36____125 $(selector).css(property)23 $(selector).css(property, value)3____125 $(selector).css(property, value)1____1236
_______42____235 _______42____1240
_______1241____239 $(selector).css(property)241 $(selector).css(property, value)41 $(selector).css(property)241 $(selector).css(property, value)43 _______42____1248 $(selector).css(property, value)1____1248 $(selector).css(property, value)9 $(selector).css(property, value)3 $(selector).css(property)25
$(selector).css(property, value)9 $(selector).css(property)24 $(selector).css(property)25 đầu ra.
ví dụ 3. Trong ví dụ này, chúng ta sẽ sử dụng phương thức css() để thêm kiểu bằng hàm HTML$(selector).css(property)22 $(selector).css(property)23 $(selector).css(property)24 $(selector).css(property)25 $(selector).css(property, value)58 $(selector).css(property)23 $(selector).css(property)27 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property, value)3 $(selector).css(property, value)4 $(selector).css(property, value)5 $(selector).css(property, value)6 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property, value)9____23 $(selector).css(property)25 $(selector).css(property, value)9 $(selector).css(property)27____125
_______123____36____125 _______21____123____40 $(selector).css(property)25 $(selector).css({property:value, property:value, ...})2____284$(selector).css(property, value)1 $(selector).css(property, value)9____40 $(selector).css(property)25 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property)222 $(selector).css(property, value)17 $(selector).css(property, value)93____294 _______42____296 $(selector).css(property, value)1 $(selector).css(property, value)9____1222 $(selector).css(property)25 $(selector).css(property, value)58 $(selector).css(property, value)1 $(selector).css(property)23 $(selector).css(property, value)3 $(selector).css(property)25 _______42____1236 $(selector).css(property)241 $(selector).css(property)240 $(selector).css(property, function(index, currentvalue))10 $(selector).css(property, function(index, currentvalue))11 $(selector).css(property, function(index, currentvalue))12 $(selector).css(property, function(index, currentvalue))13 $(selector).css(property, function(index, currentvalue))10 $(selector).css(property)248 $(selector).css(property)241 $(selector).css(property)248 _______42____1248 $(selector).css(property, value)1 $(selector).css(property, value)9____23 $(selector).css(property)25 $(selector).css(property, value)9____36____125 $(selector).css(property, value)58 $(selector).css(property, value)9 $(selector).css(property)24 $(selector).css(property)25 đầu ra.
Ví dụ 4. Trong ví dụ này, chúng ta sẽ sử dụng phương thức css() để áp dụng đồng thời nhiều thuộc tính CSS |
