คุณสมบัติ offsetLeft

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

ไวยากรณ์

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

ตัวอย่าง

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

html<div id="parent" style="position: relative;">
  <div id="elem" style="position: absolute; left: 100px"></div>
</div>
javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetLeft);

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

javascript100

ตัวอย่าง

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

html<div id="parent" style="position: relative;">
  <div id="elem" style="position: absolute; left: 100px; margin: 50px"></div>
</div>
javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetLeft);

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

javascript150

ดูเพิ่มเติม

  • คุณสมบัติ offsetTop,
    ซึ่งประกอบด้วยค่าการเยื้องบนขององค์ประกอบ
  • เมธอด getBoundingClientRect,
    ซึ่งหาค่าการเยื้องขององค์ประกอบ