主页
JS 参考手册
HTML DOM getBoundingClientRect() 方法
tryjsref_element_getboundingclientrect
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <script> function myFunction() { var div = document.getElementById("myDiv"); var rect = div.getBoundingClientRect(); x = rect.left; y = rect.top; w = rect.width; h = rect.height; alert ("Left: " + x + ", Top: " + y + ", Width: " + w + ", Height: " + h); } </script> </head> <body> <div style="height:200px; width:300px; overflow:auto;"> <div id="myDiv" style="width:250px; height:150px; border:1px solid red;"> 使用下面的按钮返回此元素相对于视口左上角的左上角。<br> 也尝试使用滚动条来测试不同位置的方法。 </div> <div style="width:1000px; height:1000px;"></div> </div> <br> <button onclick="myFunction()">获取带红色边框的元素的左上角+宽高</button> </body> </html>