HTML | DOM getBoundingClientRect() Method
HTML DOM getBoundingClientRect() Method returns the relative positioning to the viewport. It returns eight properties: left, top, right, bottom, x, y, width, height. Scrolling will change the position value.
Syntax:
var rect = div.getBoundingClientRect();
Example:
HTML
<!DOCTYPE html> < html > < head > < title > HTML | DOM getBoundingClientRect() Method </ title > < script > function myFunction() { var div = document.getElementById("myDiv"); var rectangle = div.getBoundingClientRect(); x = rectangle.left; y = rectangle.top; w = rectangle.width; h = rectangle.height; alert("Left:" + x + ", Top:" + y + ", Width:" + w + ", Height:" + h); } </ script > </ head > < body > < button onclick="myFunction()"> GET POSITION </ button > < div style="height:300px; width:400px; overflow:auto;"> < div id="myDiv" style="width:350px; height:250px; background-color:lightgreen; border:2px SOLID green;"> Use scrollbar to change the position. </ div > < div style="width:1500px; height:1500px; "> </ div > </ div > < br > </ body > </ html > |
Output:
Before Click:
After Click:
Supported Browsers:
- Chrome 2.0 and above
- Edge 12 and above
- Internet Explorer 4.0 and above
- Firefox 3.0 and above
- Opera 9.5 and above
- Safari 4.0 and above