HTML DOM เมธอด getBoundingClientRect()

HTML DOM getBoundingClientRect() ใช้สำหรับส่งคืนขนาดองค์ประกอบที่สัมพันธ์กับตำแหน่งของวิวพอร์ต ส่งคืนอ็อบเจ็กต์ประเภท DOMRect ซึ่งมีแปดคุณสมบัติซ้าย, บน, ขวา, ล่าง, x, y, ความกว้าง, ความสูง ตำแหน่งสี่เหลี่ยมขอบชิดจะเปลี่ยนเมื่อตำแหน่งเลื่อนเปลี่ยน

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด getBoundingClientRect() -

element.getBoundingClientRect()

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับเมธอด getBoundingClientRect() -

<!DOCTYPE html>
<html>
<head>
<script>
   function RectInfo() {
      document.getElementById("Sample").innerHTML="";
      var d = document.getElementById("DIV1");
      var Rect = d.getBoundingClientRect();
      rl = Rect.left;
      rt = Rect.top;
      rw = Rect.width;
      rh = Rect.height;
      document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
   }
</script>
<style>
   #DIV1{
      width:350px;
      height:250px;
      border:2px solid blue;
      color:red;
   }
</style>
</head>
<body>
<h1>getBoundingClientRect() example</h1>
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<br>
<button onclick="RectInfo()">GET INFO</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM เมธอด getBoundingClientRect()

เมื่อคลิกปุ่มรับข้อมูล -

HTML DOM เมธอด getBoundingClientRect()

ในตัวอย่างข้างต้น −

ขั้นแรกเราได้สร้าง div ที่มีความสูงและความกว้าง 200px และ 300px ตามลำดับ มีการตั้งค่าคุณสมบัติล้นเป็นอัตโนมัติเช่นแถบเลื่อนจะถูกเพิ่มโดยอัตโนมัติหากเนื้อหาล้น div มันมี div อื่นที่มี id “DIV1” ที่มีสไตล์ที่ใช้กับมัน

#DIV1{
   width:350px;
   height:250px;
   border:2px solid blue;
   color:red;
}
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

จากนั้นเราได้สร้างปุ่ม GET INFO ที่จะรันเมธอด RectInfo() เมื่อผู้ใช้คลิก -

<button onclick="RectInfo()">GET INFO</button>

วิธี RectInfo() รับองค์ประกอบ

โดยใช้วิธี getElementById() และกำหนดให้กับตัวแปร d จากนั้นใช้เมธอด getBoundingClientRect() บนตัวแปร d เพื่อส่งคืนวัตถุ DOMRect ที่มีข้อมูลเกี่ยวกับองค์ประกอบ div วัตถุที่ส่งคืนถูกกำหนดให้กับตัวแปร Rect

จากนั้นเราใช้คุณสมบัติด้านซ้าย ด้านบน ความกว้าง และความสูงของวัตถุ DOMRect เพื่อแสดงตำแหน่งและขนาดที่สัมพันธ์กับวิวพอร์ต ข้อมูลนี้แสดงในย่อหน้าที่มีรหัส "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -

function RectInfo() {
   document.getElementById("Sample").innerHTML="";
   var d = document.getElementById("DIV1");
   var Rect = d.getBoundingClientRect();
   rl = Rect.left;
   rt = Rect.top;
   rw = Rect.width;
   rh = Rect.height;
   document.getElementById("Sample").innerHTML +="Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh;
}