getBoundingClientRect() 是一个 JavaScript DOM (Document Object Model) 的方法,它提供了有关 HTML 元素大小和位置的重要数据。该方法返回一个 DOMRect 对象,该对象有八个属性:left、top、right、bottom、x、y、width 和 height。其中,left 和 top 属性表示元素的左上角相对于浏览器窗口左上角的距离;right 和 bottom 属性表示元素右下角相对于浏览器窗口左上角的距离;x 和 y 属性表示元素左上角相对于文档左上角的距离;width 和 height 属性表示元素的宽度和高度。
语法
getBoundingClientRect()
Copy to Clipboard
参数
无。
返回值
返回值是一个 DOMRect
对象,是包含整个元素的最小矩形(包括 padding
和 border-width
)。该对象使用 left
、top
、right
、bottom
、x
、y
、width
和 height
这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width
和 height
以外的属性是相对于视图窗口的左上角来计算的。
注意: 该方法返回的 DOMRect 对象中的 width 和 height 属性是包含了 padding 和 border-width 的,
而不仅仅是内容部分的宽度和高度。在标准盒子模型中,这两个属性值分别与元素的 width/height + padding + border-width 相等。
而如果是 box-sizing: border-box,两个属性则直接与元素的 width 或 height 相等。
示例
基础示例
在这个简单的示例中,获得的 DOMRect
对象表示的是一个简单的 <div>
元素的边界客户端矩形,并将其属性值显示出来。
<div></div>
div {
width: 400px;
height: 200px;
padding: 20px;
margin: 50px auto;
background: purple;
}
let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
for (var key in rect) {
if(typeof rect[key] !== 'function') {
let para = document.createElement('p');
para.textContent = `${ key } : ${ rect[key] }`;
document.body.appendChild(para);
}
}
