คุณสมบัติ offsetTop

คุณสมบัติ offsetTop ประกอบด้วยการเลื่อน ขององค์ประกอบจากด้านบนเทียบกับ offsetParent ประกอบด้วยระยะห่างจาก offsetParent ถึงขอบ ขององค์ประกอบ

ไวยากรณ์

javascriptองค์ประกอบ.offsetTop;

ตัวอย่าง

ลองหาการเลื่อนขององค์ประกอบเทียบกับ offsetParent ของมัน:

html<div id="parent" style="position: relative;">
  <div id="elem" style="position: absolute; top: 100px;"></div>
</div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetTop);

ผลลัพธ์จากการรันโค้ด:

javascript100

ตัวอย่าง

ระยะห่าง margin จะถูกรวมเข้าไปในการเลื่อนด้วย:

html<div id="parent" style="position: relative;">
  <div id="elem" style="position: absolute; top: 100px; margin: 50px;"></div>
</div>

javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetTop);

ผลลัพธ์จากการรันโค้ด:

javascript150

ดูเพิ่มเติม