คุณสมบัติ offsetParent ของ HTML DOM

คุณสมบัติ offsetParent ของ HTML DOM ส่งคืน องค์ประกอบพาเรนต์ (parent element) ที่ถูกอ้างอิง ซึ่งเป็นจุดอ้างอิงสำหรับการคำนวณ offset ของโหนดลูก (child offsets)

โดยทั่วไป offsetParent จะเป็นพาเรนต์ที่มี position ไม่ใช่ static (เช่น relative, absolute, fixed) หรือเป็น <body>, <table>, <td> เป็นต้น

ไวยากรณ์ (Syntax)

HTMLelement.offsetParent

ตัวอย่างการใช้งาน

ตัวอย่างนี้แสดง offsetParent ของฟอร์มที่มีรูปภาพอยู่ภายใน

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetParent</title>
<style type="text/css">
  #picForm { width:70%; margin: 0 auto; text-align: center; }
  input[type="button"] { border-radius: 10px; }
  #containerDiv { margin: 0 auto; }
</style>
</head>
<body>
  <form id="picForm">
    <fieldset>
      <legend>HTML-DOM-offsetParent</legend>
      <div id="containerDiv">
        <img id="image" src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
      </div>
      <input type="button" onclick="getParent()" value="Get offsetParent">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var picForm = document.getElementById("picForm");
  var containerDiv = document.getElementById("containerDiv");
  function getParent() {
    divDisplay.textContent = 'Offset for Image form is referenced from: '+picForm.offsetParent;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนกดปุ่มใดๆ:

หลังกดปุ่ม "Get offsetParent":