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

Phương thức getBoundingClientRect() trả về kích thước và vị trí của phần tử tương đối so với viewport (khung nhìn trình duyệt). Kết quả là đối tượng DOMRect có 8 thuộc tính: left, top, right, bottom, x, y, width, height. Vị trí hình chữ nhật thay đổi khi cuộn trang.

Cú pháp

element.getBoundingClientRect()

Ví dụ

Ví dụ lấy vị trí và kích thước của một div lồng trong div có thanh cuộn:

<!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>Ví dụ 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()">LẤY THÔNG TIN</button>
<p id="Sample"></p>
</body>
</html>

Kết quả

Sau khi nhấn nút "LẤY THÔNG TIN", hiển thị tọa độ left, top, width, height của div nội bộ so với viewport.

Giải thích

• Div cha có kích thước 300x200px, overflow:auto (có thanh cuộn khi nội dung tràn).
• Div con id="DIV1" kích thước 350x250px, viền xanh, chữ đỏ.
• Nút "LẤY THÔNG TIN" gọi hàm RectInfo().
• Hàm lấy div con, gọi getBoundingClientRect() nhận đối tượng DOMRect.
• Trích xuất left, top, width, height và hiển thị.