Phương thức jQuery css []
Phương thức
Biz name
Help
3 đặt hoặc trả về một hoặc nhiều thuộc tính kiểu cho các phần tử đã chọn.Trả lại thuộc tính CSS
Để trả về giá trị của thuộc tính CSS được chỉ định, hãy sử dụng cú pháp sau:
Ví dụ sau đây sẽ trả về giá trị màu nền của phần tử được khớp đầu tiên:
Đặt thuộc tính CSS
Để đặt thuộc tính CSS được chỉ định, hãy sử dụng cú pháp sau:
CSS ["PropertyName", "Giá trị"];
Ví dụ sau đây sẽ đặt giá trị màu nền cho tất cả các phần tử phù hợp:
Đặt nhiều thuộc tính CSS
Để đặt nhiều thuộc tính CSS, hãy sử dụng cú pháp sau:
CSS [{"propertyName": "value", "propertyName": "value", ...}];
Ví dụ sau đây sẽ đặt màu nền và kích thước phông chữ cho tất cả các yếu tố phù hợp:
Thí dụ
$ ["p"]. CSS [{"màu nền": "vàng", "kích thước phông chữ": "200%"}];
Hãy tự mình thử »
Bài tập jQuery
Tham khảo JQuery CSS
Để biết tổng quan đầy đủ về tất cả các phương thức JQuery CSS, vui lòng truy cập tham chiếu JQuery HTML/CSS của chúng tôi.
"#Business" hiện đang được đặt thành nền: #323232; Làm thế nào tôi có thể thay đổi nó thành #000; Sau khi tôi nhấp vào "#Business" và quay lại 323232 sau khi menu được đóng?
$[document].ready[function[] {
$["#business"].click[function[]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[""];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
}];
}];
Đây là HTML:
Biz name
Help
Biz name
$["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
Lưu ý rằng tôi đã kết hợp 2 người nghe sự kiện mà bạn bị ràng buộc với
Biz name
Help
5 vì nó không có gì khác biệt khi chỉ liên kết với một người.Như một lưu ý phụ, có lý do gì bạn đang chuyển một chuỗi trống cho
Biz name
Help
6 không? Điều đó không cần thiết.Đã trả lời ngày 14 tháng 2 năm 2012 lúc 23:05Feb 14, 2012 at 23:05
James Allardicejames AllardiceJames Allardice
163K21 Huy hiệu vàng329 Huy hiệu bạc310 Huy hiệu Đồng21 gold badges329 silver badges310 bronze badges
0
Nếu bạn muốn thay đổi nền của một phần tử [trong trường hợp của bạn "#business"] thành một màu, bạn chỉ cần làm:
$["#business"].css[{
"background": "#000"
}];
Nhưng tôi không chắc ý của bạn là "menu", có lẽ bạn nên cho chúng tôi xem mã HTML của bạn!
Đã trả lời ngày 14 tháng 2 năm 2012 lúc 23:08Feb 14, 2012 at 23:08
RorchackhrorchackhRorchackh
2.0954 Huy hiệu vàng22 Huy hiệu bạc38 Huy hiệu đồng4 gold badges22 silver badges38 bronze badges
1
Hàm
Biz name
Help
4 được sử dụng để thay đổi các thuộc tính CSS như nền.$['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
Đã trả lời ngày 14 tháng 2 năm 2012 lúc 23:06Feb 14, 2012 at 23:06
JaredparjaredparJaredPar
717K146 Huy hiệu vàng1222 Huy hiệu bạc1445 Huy hiệu Đồng146 gold badges1222 silver badges1445 bronze badges
Biz name
Biz name
Help
9 trong các trình duyệt dựa trên tiêu chuẩn so với các thuộc tính $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
0 và $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
1 trong trình thám hiểm Internet Trước phiên bản 9] và các trình duyệt Điều khoản khác nhau sử dụng cho các thuộc tính nhất định. Ví dụ: triển khai DOM của Internet Explorer đề cập đến thuộc tính $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
2 là $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
3, trong khi các trình duyệt tuân thủ tiêu chuẩn W3C gọi nó là $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
4. Để thống nhất, bạn có thể chỉ cần sử dụng $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
5 và jQuery sẽ dịch nó thành giá trị chính xác cho mỗi trình duyệt.Ngoài ra, jQuery có thể giải thích như nhau về định dạng CSS và DOM của các thuộc tính nhiều từ. Ví dụ: JQuery hiểu và trả về giá trị chính xác cho cả
$["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
6 và $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
7. Điều này có nghĩa là trường hợp hỗn hợp có ý nghĩa đặc biệt, ví dụ $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
8 sẽ không làm giống như $["#business"].click[function[event]{
jQuery.fx.off = true;
$["#businessmenu"].toggle[""];
$[this].css["background-color", "#000"];
event.stopPropagation[];
}];
$['html'].click[function[] {
$["#businessmenu"].hide[];
$["#business"].css["background-color", "#323232"];
}];
9.Lưu ý rằng kiểu tính toán của một phần tử có thể không giống như giá trị được chỉ định cho phần tử đó trong một bảng kiểu. Ví dụ, các kiểu kích thước được tính toán hầu như luôn luôn là pixel, nhưng chúng có thể được chỉ định là em, ex, px hoặc % trong một bảng kiểu. Các trình duyệt khác nhau có thể trả về các giá trị màu CSS về mặt logic nhưng không bằng văn bản, ví dụ: #FFF, #FFFFFF và RGB [255.255.255].
Truy xuất các thuộc tính CSS tốc ký [ví dụ:
$["#business"].css[{
"background": "#000"
}];
0, $["#business"].css[{
"background": "#000"
}];
1, $["#business"].css[{
"background": "#000"
}];
2], mặc dù chức năng với một số trình duyệt, không được đảm bảo. Ví dụ: nếu bạn muốn truy xuất $["#business"].css[{
"background": "#000"
}];
3 được kết xuất, hãy sử dụng: $["#business"].css[{
"background": "#000"
}];
4, $["#business"].css[{
"background": "#000"
}];
5, v.v.
Một phần tử nên được kết nối với DOM khi gọi
Biz name
Help
8 trên đó. Nếu không, JQuery có thể gây ra lỗi.Kể từ JQuery 1.9, chuyển một loạt các thuộc tính kiểu cho
8 sẽ dẫn đến một đối tượng của các cặp giá trị tài sản. Ví dụ: để truy xuất tất cả bốn giá trị Biz name
3 được hiển thị, bạn có thể sử dụng $["#business"].css[{
"background": "#000"
}];
9., passing an array of style properties to $["#business"].css[{
"background": "#000"
}];
Biz name
Help
8 will result in an object of property-value pairs. For example, to retrieve all four rendered $["#business"].css[{
"background": "#000"
}];
3 values, you could use $["#business"].css[{
"background": "#000"
}];
9. Kể từ JQuery 3.2, các thuộc tính tùy chỉnh CSS [còn được gọi là biến CSS] được hỗ trợ:
0. Lưu ý rằng bạn cần cung cấp tên tài sản như hiện tại, Camelcasing nó sẽ không hoạt động như đối với các thuộc tính CSS thông thường., CSS Custom Properties [also called
CSS Variables] are supported: $['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
$['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
0. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.Examples:
Nhận màu nền của một div nhấp.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
Demo:
Nhận chiều rộng, chiều cao, màu văn bản và màu nền của một div đã nhấp.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
|
Demo:
$["#business"].css[{
"background": "#000"
}];
2 or $["#business"].css[{
"background": "#000"
}];
1 will remove that style entirely from the element, regardless of what is set in a stylesheet or 5 element.
$[ "div" ].click[function[] {
var color = $[ this ].css[ "background-color" ];
$[ "#result" ].html[ "That div is " + color + "." ];
Ngoài ra, jQuery có thể giải thích như nhau về định dạng CSS và DOM của các thuộc tính nhiều từ. Ví dụ: JQuery hiểu và trả về giá trị chính xác cho cả
4 và $['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
5. Lưu ý rằng với ký hiệu DOM, các dấu ngoặc kép xung quanh tên thuộc tính là tùy chọn, nhưng với ký hiệu CSS, chúng được yêu cầu do dấu gạch nối trong tên. $['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
Biz name
Help
8 doesn't support 0 declarations. So, the statement
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
background-color: #123456;
$[ "div" ].click[function[] {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $[ this ].css[[
"width", "height", "color", "background-color"
$.each[ styleProps, function[ prop, value ] {
html.push[ prop + ": " + value ];
$[ "#result" ].html[ html.join[ "
" ] ];
1 does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that not working, though, as a future version of jQuery may add support for such declarations. It's strongly advised to use classes instead; otherwise use a jQuery plugin.
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
background-color: #123456;
$[ "div" ].click[function[] {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $[ this ].css[[
"width", "height", "color", "background-color"
$.each[ styleProps, function[ prop, value ] {
html.push[ prop + ": " + value ];
$[ "#result" ].html[ html.join[ "
" ] ];
Khi một số được truyền dưới dạng giá trị, jQuery sẽ chuyển đổi nó thành một chuỗi và thêm
$['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
6 vào cuối chuỗi đó. Nếu thuộc tính yêu cầu các đơn vị khác với $['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
6, hãy chuyển đổi giá trị thành một chuỗi và thêm các đơn vị thích hợp trước khi gọi phương thức.Khi sử dụng
Biz name
Help
8 làm setter, JQuery sẽ sửa đổi thuộc tính $['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
9 của phần tử. Ví dụ, 0 tương đương với
$[ "div" ].click[function[] {
var color = $[ this ].css[ "background-color" ];
$[ "#result" ].html[ "That div is " + color + "." ];
1. Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ:
$[ "div" ].click[function[] {
var color = $[ this ].css[ "background-color" ];
$[ "#result" ].html[ "That div is " + color + "." ];
2 - Loại bỏ thuộc tính đó khỏi một phần tử nếu nó đã được áp dụng trực tiếp, cho dù trong thuộc tính kiểu HTML, thông qua phương thức
$[ "div" ].click[function[] {
var color = $[ this ].css[ "background-color" ];
$[ "#result" ].html[ "That div is " + color + "." ];
Biz name
Help
8 của JQuery hoặc thông qua thao tác trực tiếp của thuộc tính $['html'].click[function[] {
$['#businessmenu'].hide[""];
$['#busniessmenu'].css['background-color', '#323232'];
}];
$['#business'].click[function[event]{
event.stopPropagation[];
$[this].css['background-color', '#000'];
}];
9. Kết quả là, phong cách của phần tử cho tài sản đó sẽ được khôi phục về bất kỳ giá trị nào được áp dụng. Vì vậy, phương pháp này có thể được sử dụng để hủy bỏ bất kỳ sửa đổi kiểu nào mà bạn đã thực hiện trước đây. Tuy nhiên, nó không loại bỏ một kiểu đã được áp dụng với quy tắc CSS trong một phần tử hoặc phần tử 5. CẢNH BÁO: Một ngoại lệ đáng chú ý là, IE 8 trở xuống, việc loại bỏ một tài sản tốc ký như
$[ "div" ].click[function[] {
var color = $[ this ].css[ "background-color" ];
$[ "#result" ].html[ "That div is " + color + "." ];
$["#business"].css[{
"background": "#000"
}];
2 hoặc $["#business"].css[{
"background": "#000"
}];
1 sẽ loại bỏ hoàn toàn kiểu đó khỏi yếu tố, bất kể những gì được đặt trong một phần tử hoặc phần tử 5.
$[ "div" ].click[function[] {
var color = $[ this ].css[ "background-color" ];
$[ "#result" ].html[ "That div is " + color + "." ];
Lưu ý:
Biz name
Help
8 không hỗ trợ khai báo 0. Vì vậy, câu lệnh
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
background-color: #123456;
$[ "div" ].click[function[] {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $[ this ].css[[
"width", "height", "color", "background-color"
$.each[ styleProps, function[ prop, value ] {
html.push[ prop + ": " + value ];
$[ "#result" ].html[ html.join[ "
" ] ];
1 không biến màu của tất cả các đoạn trong trang thành màu đỏ như JQuery 3.6.0. Tuy nhiên, không phụ thuộc vào việc không hoạt động, vì một phiên bản tương lai của jQuery có thể thêm hỗ trợ cho các tuyên bố đó. Thay vào đó, bạn nên sử dụng các lớp học; Nếu không, sử dụng một plugin jQuery.
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
background-color: #123456;
$[ "div" ].click[function[] {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $[ this ].css[[
"width", "height", "color", "background-color"
$.each[ styleProps, function[ prop, value ] {
html.push[ prop + ": " + value ];
$[ "#result" ].html[ html.join[ "
" ] ];
1 2 3 | Kể từ JQuery 1.8, setter 8 sẽ tự động chăm sóc tiền tố tên tài sản. Ví dụ: lấy 3 trong Chrome/Safari sẽ đặt nó thành 4, Firefox sẽ sử dụng 5 và IE10 sẽ sử dụng 6. |
Kể từ JQuery 1.6,
Biz name
Help
8 chấp nhận các giá trị tương đối tương tự như 8. Các giá trị tương đối là một chuỗi bắt đầu bằng
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
background-color: #123456;
$[ "div" ].click[function[] {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $[ this ].css[[
"width", "height", "color", "background-color"
$.each[ styleProps, function[ prop, value ] {
html.push[ prop + ": " + value ];
$[ "#result" ].html[ html.join[ "
" ] ];
9 hoặc
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
background-color: #123456;
$[ "div" ].click[function[] {
var html = [ "The clicked div has the following styles:" ];
var styleProps = $[ this ].css[[
"width", "height", "color", "background-color"
$.each[ styleProps, function[ prop, value ] {
html.push[ prop + ": " + value ];
$[ "#result" ].html[ html.join[ "
" ] ];
0 để tăng hoặc giảm giá trị hiện tại. Ví dụ: nếu phần đệm của một phần tử là 10px,
$[ "div.example" ].css[ "width", function[ index ] {
1 sẽ dẫn đến tổng số phần đệm là 25px.
$[ "div.example" ].css[ "width", function[ index ] {
Kể từ JQuery 1.4,
8 cho phép chúng tôi chuyển một hàm dưới dạng giá trị thuộc tính:If nothing is returned in the setter function [ie. Biz name
3, or if
$[ "div.example" ].css[ "width", function[ index ] {
4 is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.
$[ "div.example" ].css[ "width", function[ index ] {
, CSS Custom Properties
[also called CSS Variables] are supported: $[ "div.example" ].css[ "width", function[ index ] {
5. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.
$[ "div.example" ].css[ "width", function[ index ] {
Examples:
Ví dụ này đặt độ rộng của các phần tử phù hợp thành các giá trị lớn hơn dần dần.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | Lưu ý: Nếu không có gì được trả về trong hàm setter [ví dụ: 3 hoặc nếu 4 được trả về, giá trị hiện tại không được thay đổi. Điều này rất hữu ích cho việc cài đặt có chọn lọc chỉ khi đáp ứng các tiêu chí nhất định. |
Demo:
Kể từ JQuery 3.2, các thuộc tính tùy chỉnh CSS [còn được gọi là biến CSS] được hỗ trợ:
5. Lưu ý rằng bạn cần cung cấp tên tài sản như hiện tại, Camelcasing nó sẽ không hoạt động như đối với các thuộc tính CSS thông thường.
$[ "div.example" ].css[ "width", function[ index ] {
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | Thay đổi màu của bất kỳ đoạn nào thành màu đỏ trên sự kiện chuột. |
Demo:
________số 8
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | Tăng chiều rộng của #Box lên 200 pixel ngay lần đầu tiên được nhấp. |
Demo:
Click me to grow
$[ "#box" ].one[ "click", function[] {
$[ this ].css[ "width", "+=200" ];
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 1 |
Demo:
Tăng kích thước của một div khi bạn nhấp vào nó.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 2 |