W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <h1>Element 对象</h1> <h2>getBoundingClientRect() 方法</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;"> 滚动以显示带有边框的元素的 bounding client rect。 </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>