getBoundingClientRect()获取DOM元素大小

原创
2023/04/10 17:33
阅读数 115

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)。该对象使用 lefttoprightbottomxywidth  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);
  }
}
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部