Định nghĩa và sử dụng
- .offset[]: Lấy tọa độ hiện tại của thành phần đầu tiên, hoặc thiết lập các tọa độ của từng thành phần trong tập hợp các thành phần phù hợp liên quan đến văn bản.
Cấu trúc
- Đã được thêm vào từ phiên bản 1.2
.offset[]
$['p'].offset[];- Đã được thêm vào từ phiên bản 1.4
.offset[tọa độ]
$['p'].offset[{ top: 10, left: 20 }];.offset[function[index,tọa độ]{...}]
$['p'].offset[function[index,{ top: 10, left: 20 }]{...}];.offset[]
Html viết:
Tiêu đề
$[function[]{
var offset = $['div'].offset[];
$['span'].text[offset.left+" , "+offset.top];
}];
Tọa độ của thành phần div: []
Tag div
Hiển thị trình duyệt:
Cách sử dụng $['div'].offset[] ta đã lấy được giá trị tọa độ của thành phần div.
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQueryTọa độ của thành phần div: []
Tag div
Tọa độ của thành phần div: [0 , 52]
Tag div
.offset[tọa độ]
Html viết:
Tiêu đề
p { background-color: pink; }
div { background-color: yellow; }
$[function[]{
$['div'].offset[{top: 80, left: 300 }];
}];
Tag p
Tag div
Hiển thị trình duyệt:
Tọa độ của thành phần div hiện giờ đã được thay đổi, tương đương đoạn sytle sau: position: relative; top: 80px; left: 300px;.
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQueryTag p
Tag div
Tag p
Tag div
.offset[function[index,tọa độ]{...}]
Html viết:
Tiêu đề
p { background-color: blue; }
$[function[]{
$['button'].on['click', function[] {
$['p'].offset[function[index, coordinates]{
if [index == 0] {//Chỉ tác động lên thành phần đầu tiên
coordinates.top += 10;
coordinates.left += 10;
}
return $[this].offset[coordinates];
}];
}];
}];
Tag p 01
Tag p 02
ClickHiển thị trình duyệt:
Khi click vào button, ta đã cộng thêm vào 10px của tọa độ x và y
So sánh code HTML trước và sau khi có jQuery:
Trước khi có jQuery Sau khi có jQueryTag p 01
Tag p 02
Click
Tag p 01
Tag p 02
Click
.off[]
.offsetParent[]