​x
 
<!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>
​