วิธี offset

วิธี offset ช่วยให้รับ ตำแหน่งขององค์ประกอบที่สัมพันธ์กับเอกสารได้ แตกต่างจากวิธี position ซึ่งรับพิกัดที่สัมพันธ์กับ ระยะห่างขององค์ประกอบแม่ วิธี offset มีประโยชน์มากกว่า เมื่อต้องการวางตำแหน่งองค์ประกอบใหม่ บนองค์ประกอบที่มีอยู่เพื่อการจัดการในระดับกว้าง เช่น เพื่อการนำไปใช้ลากและวาง (drag-and-drop) วิธีนี้จะคืนค่าออบเจ็กต์ ที่มีคุณสมบัติ top และ left ข้อผิดพลาดในการคำนวณอาจเกิดขึ้นได้ หากผู้ใช้ เปลี่ยนขนาดหน้าเว็บ นอกจากนี้วิธีนี้ยังไม่สามารถรับ พิกัดขององค์ประกอบที่ถูกซ่อนได้

โครงสร้าง

รับพิกัดปัจจุบัน ในบางกรณี ค่าที่ได้รับอาจเป็นทศนิยม:

javascript$(ตัวเลือก).offset();

เพื่อเปลี่ยนพิกัดขององค์ประกอบ ต้อง ส่งออบเจ็กต์ที่มีคุณสมบัติ top และ left:

javascript$(ตัวเลือก).offset({top: 40, left: 40});

นอกจากนี้เรายังสามารถใช้ฟังก์ชันที่กำหนดให้กับแต่ละ องค์ประกอบในเซตได้ โดยพารามิเตอร์แรกของฟังก์ชัน จะได้รับลำดับขององค์ประกอบในเซต และพารามิเตอร์ที่สอง คือออบเจ็กต์ที่มีพิกัด top และ left this ภายในฟังก์ชันจะชี้ไปที่ องค์ประกอบปัจจุบัน ค่าพิกัดขององค์ประกอบจะเปลี่ยนเป็นค่า ที่ฟังก์ชันคืนกลับมา:

javascript$(ตัวเลือก).width(function(ลำดับในเซต, {พิกัดปัจจุบัน}));

ตัวอย่าง

มาลองรับตำแหน่งของดิฟ (สี่เหลี่ยมสีเขียว) ด้วยวิธี offset จากนั้นด้วยการเข้าถึง คีย์ของออบเจ็กต์ที่ได้รับ แสดงผล ข้อมูลนี้:

html<div id="result">คลิกที่สี่เหลี่ยม ...</div>
<div id="test"></div>

css#test {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  background: green;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

javascript$('*', document.body).click(function(event) {
  let offset = $(this).offset();
  
  event.stopPropagation();
  $('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

ตัวอย่าง

มาลองเปลี่ยนพิกัดของย่อหน้าที่สอง:

html<p style="margin-left: 10px;">ข้อความ1</p>
<p style="margin-left: 10px;">ข้อความ2</p>

javascript$('p').last().offset({top: 40, left: 60});

ดูเพิ่มเติม