Phương thức HTML DOM getBainstClientRect ()

HTML DOM getBoundsClientRect () được sử dụng để trả về kích thước phần tử liên quan đến vị trí của khung nhìn. Nó trả về một đối tượng kiểu DOMRect có tám thuộc tính left, top, right, bottom, x, y, width, height. Vị trí hình chữ nhật bao quanh thay đổi khi vị trí cuộn thay đổi.

Cú pháp

Sau đây là cú pháp cho phương thức getBoundsClientRect () -

element.getBoundingClientRect()

Ví dụ

Chúng ta hãy xem một ví dụ cho phương thức getBoundsClientRect () -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phương thức HTML DOM getBainstClientRect ()

Khi nhấp vào nút NHẬN THÔNG TIN -

Phương thức HTML DOM getBainstClientRect ()

Trong ví dụ trên -

Đầu tiên chúng ta đã tạo một div có chiều cao và chiều rộng lần lượt là 200px và 300px. Nó có thuộc tính tràn được đặt thành tự động, tức là các thanh cuộn sẽ tự động được thêm vào nếu nội dung tràn div. Nó chứa một div khác có id “DIV1” có một số kiểu được áp dụng cho nó.

#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>

Sau đó, chúng tôi đã tạo một nút NHẬN THÔNG TIN sẽ thực thi phương thức RectInfo () khi người dùng nhấp vào -

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

Phương thức RectInfo () nhận phần tử

bằng phương thức getElementById () và gán nó cho biến d. Sau đó, nó sử dụng phương thức getBoundsClientRect () trên biến d để trả về một đối tượng DOMRect có chứa thông tin về phần tử div. Đối tượng trả về được gán cho biến Rect.

Sau đó, chúng tôi sử dụng các thuộc tính bên trái, trên cùng, chiều rộng và chiều cao của đối tượng DOMRect để hiển thị vị trí và kích thước của nó so với khung nhìn. Thông tin này được hiển thị trong đoạn văn có id “Sample” bằng cách sử dụng thuộc tính 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;
}