การจัดตำแหน่งใน jQuery

สำหรับการทำงานกับพิกัดขององค์ประกอบใน jQuery มีเมธอด position และ offset

เมธอดเหล่านี้ใช้เพื่อรับหรือเปลี่ยน พิกัดปัจจุบันขององค์ประกอบและส่งคืนผลลัพธ์ เป็นวัตถุที่มีคุณสมบัติ top และ left

ข้อผิดพลาดในการคำนวณอาจเกิดขึ้นหากผู้ใช้ เปลี่ยนขนาดของหน้าเว็บ นอกจากนี้เมธอดไม่สามารถรับ พิกัดขององค์ประกอบที่ซ่อนอยู่ได้

เมธอด offset รับตำแหน่งขององค์ประกอบ เทียบกับเอกสาร ส่วน position รับตำแหน่ง ขององค์ประกอบเทียบกับการเยื้องของพ่อแม่

สมมติว่าเรามีโค้ด HTML ดังต่อไปนี้:

html<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

และมีสไตล์ CSS เชื่อมกับย่อหน้า:

css#parent {
  width: 150px;
  border: 1px solid blueviolet;
}
#test {
  margin: 5px;
  text-align: center;
  outline: 1px solid green;
}

ลองรับตำแหน่งของ div test ด้วย เมธอดเหล่านี้ และโดยการเข้าถึงคีย์ของวัตถุที่ได้ ให้แสดงข้อมูลนี้ด้านล่างในย่อหน้า:

javascriptlet offset = $('#test').offset();
$('#text1').text(
  '(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
  '(POSITION()) left: ' + position.left + ', top: ' + position.top
);