คุณสมบัติ offsetParent

คุณสมบัติ offsetParent มีองค์ประกอบแม่ที่ใกล้ที่สุด ซึ่งเป็นที่อ้างอิงสำหรับ การจัดตำแหน่งขององค์ประกอบ นี่จะเป็น องค์ประกอบแม่ที่ใกล้ที่สุดที่มีคุณสมบัติ CSS position ไม่เท่ากับ static หรือแท็ก body, หากไม่มีองค์ประกอบแม่ที่มีการจัดตำแหน่งดังกล่าว

ไวยากรณ์

element.offsetParent;

ตัวอย่าง

ลองหาองค์ประกอบแม่ที่มีคุณสมบัติ position ที่ไม่ใช่ static:

<div id="parent3">
	<div id="parent2" style="position: relative">
		<div id="parent1">
			<p id="elem">ข้อความ</p>
		</div>
	</div>
</div>

let elem = document.querySelector('#elem');
console.log(elem.offsetParent.id);

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

'parent2'

ตัวอย่าง

หากองค์ประกอบแม่ไม่มีตำแหน่งที่กำหนด, offsetParent จะมี body:

<div>
	<p id="elem">ข้อความ</p>
</div>

let elem = document.querySelector('#elem');
console.log(elem.offsetParent.tagName);

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

'BODY'

ดูเพิ่มเติม

คุณสมบัติ offsetParent,
ซึ่งมีองค์ประกอบแม่ที่มีการจัดตำแหน่ง
คุณสมบัติ offsetTop,
ซึ่งมีระยะห่างขององค์ประกอบจากด้านบน
คุณสมบัติ offsetLeft,
ซึ่งมีระยะห่างขององค์ประกอบจากด้านซ้าย
เมธอด getBoundingClientRect,
ซึ่งหาระยะห่างขององค์ประกอบ