The HTML DOM getBoundingClientRect() is used for returning an element size relative to the position of the viewport. It returns an object of type DOMRect which has eight properties left, top, right, bottom, x, y, width, height. The bounding rectangle position changes when the scrolling position changes.
Syntax
Following is the syntax for the getBoundingClientRect() method −
element.getBoundingClientRect()
Example
Let us look at an example for the getBoundingClientRect() method −
<!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>Output
This will produce the following output −
On clicking the GET INFO button −
In the above example −
We have first created a div of height and width 200px and 300px respectively. It has the overflow property set to auto i.e scrollbars will automatically get added if the content overflows the div. It contains another div with id “DIV1” that has some styling applied to it.
#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>We have then created a button GET INFO that will execute the RectInfo() method when clicked by the user −
<button onclick="RectInfo()">GET INFO</button>
The RectInfo() method gets the <div> element using the getElementById() method and assigns it to variable d. It then uses the getBoundingClientRect() method on the variable d to return a DOMRect object containing information about the div element. The returned object is assigned to variable Rect.
We then use the left, top, width and height properties of the DOMRect object to display its position and size relative to viewport. This information is displayed in the paragraph with id “Sample” using its innerHTML property −
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;
}