Thuộc tính offsetTop của phần tử DOM HTML

Định nghĩa và cách sử dụng

offsetTop Thuộc tính trả về vị trí bên trên tương đối với bậc cha (theo đơn vị pixel). Thuộc tính này là chỉ đọc.

Giá trị trả về bao gồm:

  • Vị trí bên trên của phần tử và biên lề bên ngoài
  • Vị trí bên trên của biên lề nội bộ, thanh cuộn và viền của bậc cha

Xin xem thêm:Hướng dẫn về mô hình khung CSS

offsetParent

Tất cả các phần tử block báo cáo giá trị dịch chuyển tương đối với bậc cha có vị trí dịch chuyển:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Bậc cha có vị trí dịch chuyển là bậc tổ tiên gần nhất có vị trí dịch chuyển không phải là tĩnh.

Nếu không tồn tại bậc cha có vị trí dịch chuyển, giá trị dịch chuyển sẽ là tương đối với văn bản chính của tài liệu.

Xin xem thêm:

Thuộc tính offsetLeft

Thuộc tính offsetWidth

Thuộc tính offsetHeight

Thuộc tính offsetParent

Thuộc tính clientTop

Thuộc tính clientLeft

Thuộc tính clientWidth

Thuộc tính clientHeight

Mẫu

Ví dụ 1

Lấy vị trí offsetTop của "myDIV":

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

Thử ngay

Ví dụ 2

Lấy vị trí của "myDIV":

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

Thử ngay

Ví dụ 3

Tạo thanh điều hướng dính:

// Lấy thanh điều hướng
const navbar = document.getElementById("navbar");
// Lấy vị trí cuộn của thanh điều hướng
const sticky = navbar.offsetTop;
// Khi bạn đến vị trí cuộn của nó, thêm lớp sticky vào thanh điều hướng. Loại bỏ lớp sticky khi rời khỏi vị trí cuộn.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Thử ngay

Cú pháp

Trả về vị trí top offset:

element.offsetTop

Giá trị trả về

Loại Mô tả
Số Vị trí trên cùng của phần tử, tính bằng pixel.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ