Phần tử DOM HTML offsetTop
Ví dụ
Lấy vị trí offsetTop của "myDIV":
const element = document.getElementById("myDIV");
let pos = element.offsetTop;
Hãy tự mình thử »Nhận các vị trí của "myDIV":
const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính offsetTop
trả về vị trí trên cùng (tính bằng pixel) so với phần tử gốc.
Giá trị trả về bao gồm:
- vị trí trên cùng và lề của phần tử
- phần đệm trên cùng, thanh cuộn và đường viền của phần tử gốc
Thuộc tính offsetTop
là chỉ đọc.
Hướng dẫn:
offsetParent
Tất cả các phần tử cấp khối đều báo cáo độ lệch liên quan đến phần tử gốc bù:
- offsetTop
- offsetLeft
- offsetWidth
- bù đắpChiều cao
Cha mẹ bù đắp là tổ tiên gần nhất có vị trí không phải là vị trí tĩnh.
Nếu không có phần gốc chênh lệch nào tồn tại thì phần bù sẽ liên quan đến nội dung tài liệu.
Xem thêm:
Cú pháp
Trả về vị trí offset trên cùng:
element .offsetTop
Giá trị trả về
Kiểu | Sự miêu tả |
Con số | Vị trí trên cùng của phần tử, tính bằng pixel. |
Thêm ví dụ
Tạo một thanh điều hướng cố định:
// Get the navbar
const navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Hãy tự mình thử »Hỗ trợ trình duyệt
element.offsetTop
được hỗ trợ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |