Run ❯
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <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>
