วิธี offset

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

โครงสร้าง

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

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

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

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

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

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

ตัวอย่าง

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

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

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

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

ตัวอย่าง

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

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

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

ดูเพิ่มเติม

วิธี position,
ซึ่งช่วยให้รับ พิกัดปัจจุบันขององค์ประกอบได้
วิธี offsetParent,
ซึ่งช่วยให้รับองค์ประกอบแม่ที่ถูกวางตำแหน่ง ที่ใกล้ที่สุดขององค์ประกอบ
วิธี css,
ซึ่งช่วยให้รับและ เปลี่ยนสไตล์ CSS ขององค์ประกอบได้