x
<html><h1>The Element Object</h1><h2>The getBoundingClientRect() Method</h2><body><div onscroll="myFunction()" style="height:200px; width:300px; overflow:auto;"><div id="myDiv" style="width:250px; height:150px; padding:16px; border:1px solid black;">Scroll to display the bounding client rect of the element with the border.</div><div style="width:1000px; height:1000px;"></div></div><p id="demo"></p><script>function myFunction() { const element = document.getElementById("myDiv"); const rect = element.getBoundingClientRect(); document.getElementById("demo").innerHTML ="Left: " + rect.left.toFixed() + ", Top: " + rect.top.toFixed() + ", Width: " + rect.width + ", Height: " + rect.height;}</script></body></html>