เมธอด getBoundingClientRect() ใน HTML DOM

เมธอด getBoundingClientRect() ใน HTML DOM ใช้สำหรับคืนค่าขนาดและตำแหน่งขององค์ประกอบสัมพัทธ์กับ viewport (พื้นที่มองเห็นของเบราว์เซอร์) คืนค่าเป็นออบเจ็กต์ DOMRect ที่มี 8 คุณสมบัติ: left, top, right, bottom, x, y, width, height ตำแหน่งของสี่เหลี่ยมขอบเขตจะเปลี่ยนเมื่อมีการเลื่อนหน้าจอ (scroll)

ไวยากรณ์ (Syntax)

element.getBoundingClientRect()

ตัวอย่าง

ตัวอย่างการดึงขนาดและตำแหน่งของ div สัมพัทธ์กับ viewport:

<!DOCTYPE html>
<html>
<head>
<script>
  function RectInfo() {
    document.getElementById("Sample").innerHTML = "";
    var div = document.getElementById("DIV1");
    var rect = div.getBoundingClientRect();
    
    var left = rect.left;
    var top = rect.top;
    var width = rect.width;
    var height = rect.height;
    
    document.getElementById("Sample").innerHTML = 
      "Left: " + left + ",<br> Top: " + top + ",<br> Width: " + width + ",<br> Height: " + height;
  }
</script>
<style>
  #DIV1 {
    width: 350px;
    height: 250px;
    border: 2px solid blue;
    color: red;
  }
</style>
</head>
<body>
<h1>ตัวอย่าง getBoundingClientRect()</h1>
<div style="height:200px; width:300px; overflow:auto;">
  <div id="DIV1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </div>
</div>
<br>
<button onclick="RectInfo()">GET INFO</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงกล่อง div ที่มี scrollbar (เนื่องจากเนื้อหายาวกว่าพื้นที่) และปุ่ม "GET INFO"

เมื่อคลิกปุ่ม "GET INFO" จะแสดงตำแหน่ง left, top และขนาด width, height ของ div สัมพัทธ์กับ viewport

คำอธิบายโค้ด

• สร้าง div ภายนอกขนาด 300x200px มี overflow:auto เพื่อให้มี scrollbar เมื่อเนื้อหาเกิน
• ภายในมี div id="DIV1" ขนาด 350x250px กรอบสีน้ำเงิน ตัวอักษรสีแดง
• สร้างปุ่ม "GET INFO" เรียกใช้ RectInfo() เมื่อคลิก
• ฟังก์ชัน RectInfo() ดึง div ด้วย getElementById("DIV1") เรียก getBoundingClientRect() ได้ออบเจ็กต์ DOMRect
• อ่านค่า left, top, width, height แล้วแสดงในย่อหน้า id="Sample"