Phương pháp
9 là một cách thuận tiện để lấy thuộc tính kiểu được tính toán từ phần tử khớp đầu tiên, đặc biệt là theo các cách khác nhau mà trình duyệt truy cập vào hầu hết các thuộc tính đó [phương thức
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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 trong trình duyệt dựa trên tiêu chuẩn so với thuộc tính
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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 và
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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 trong Internet Explorer . Ví dụ: việc triển khai DOM của Internet Explorer đề cập đến thuộc tính
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
2 là
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
3, trong khi các trình duyệt tuân thủ tiêu chuẩn W3C đề cập đến thuộc tính đó là
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
4. Để thống nhất, bạn chỉ cần sử dụng
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
5 và jQuery sẽ dịch nó thành giá trị chính xác cho từng trình duyệt
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
Ngoài ra, jQuery có thể diễn giải như nhau đị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ả
6 và
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
7. Điều này có nghĩa là trường hợp hỗn hợp có ý nghĩa đặc biệt, chẳng hạn như
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
8 sẽ không giống như
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
Lưu ý rằng kiểu được tính toán của một phần tử có thể không giống với giá trị được chỉ định cho phần tử đó trong biểu định kiểu. Ví dụ: các kiểu kích thước được tính toán hầu như luôn là pixel, nhưng chúng có thể được chỉ định là em, ex, px hoặc % trong biểu định kiểu. Các trình duyệt khác nhau có thể trả về các giá trị màu CSS giống nhau về mặt logic nhưng không giống nhau về mặt văn bản, ví dụ:. g. , #FFF, #ffffff và rgb[255,255,255]
Truy xuất các thuộc tính CSS tốc ký [e. g. ,
00,
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
01,
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
02], mặc dù hoạt động được với một số trình duyệt nhưng không được đảm bảo. Ví dụ: nếu bạn muốn truy xuất
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
03 đã kết xuất, hãy sử dụng.
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
04,
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
05, v.v.
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
Một phần tử phải được kết nối với DOM khi gọi
9 trên đó. Nếu không, jQuery có thể báo lỗi
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
Kể từ jQuery 1. 9, việc chuyển một mảng các thuộc tính kiểu cho
9 sẽ dẫn đến một đối tượng gồm các cặp thuộc tính-giá trị. Ví dụ: để truy xuất tất cả bốn giá trị
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
03 được hiển thị, bạn có thể sử dụng
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
09
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];
Kể từ jQuery 3. 2, Thuộc tính tùy chỉnh CSS [còn gọi là Biến CSS] được hỗ trợ.
85. Lưu ý rằng bạn cần cung cấp tên thuộc tính nguyên trạng, camelCasing nó sẽ không hoạt động như đối với các thuộc tính CSS thông thường
css demo
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb[255, 255, 255];
background-color: rgb[15, 99, 30];
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
1
2
3
4
$[ "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[ "
" ] ];
}];