Phần tử offsetTop thuộc tính
❮ Đối tượng phần tửThí dụ
Nhận vị trí offsetTop của phần tử <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
Định nghĩa và Cách sử dụng
Thuộc tính offsetTop trả về vị trí trên cùng (tính bằng pixel) so với đỉnh của phần tử offsetParent.
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ử offsetParent
Lưu ý: Phần tử offsetParent là phần tử tổ tiên gần nhất có vị trí khác với vị trí tĩnh.
Mẹo: Để trả lại vị trí bên trái của một phần tử, hãy sử dụng thuộc tính offsetLeft .
Hỗ trợ trình duyệt
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
Cú pháp
Trả lại vị trí bù đắp trên cùng:
object.offsetTop
Chi tiết kỹ thuật
Giá trị mặc định: | không có giá trị mặc định |
---|---|
Giá trị trả lại: | Một Số, đại diện cho vị trí trên cùng của phần tử, tính bằng pixel |
Phiên bản DOM: | CSSOM |
Các ví dụ khác
Thí dụ
Nhận vị trí của phần tử aa <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
Thí dụ
Tạo một thanh điều hướng cố định:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var 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");
}
}
❮ Đối tượng phần tử