超详细分析！！！秒懂getBoundingClientRect()

今天也要加油ya

已于 2024-11-06 09:32:25 修改

阅读量1.4w

点赞数 27

文章标签： javascript 前端 html css

于 2023-12-08 17:52:45 首次发布

本文链接：https://blog.csdn.net/weixin_61597234/article/details/134878221

版权

本文详细解释了Element.getBoundingClientRect()方法的作用，介绍了其语法和返回值，包括六个属性的含义，并通过示例分析了如何计算元素在视口中的位置和尺寸，特别关注了标准盒子模型和border-box模式的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是Element.getBoundingClientRect()方法？有什么作用？

一、什么是Element.getBoundingClientRect()方法？有什么作用？

作用：用来获取元素的位置以及大小相关的信息。
是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置。

二、语法

element.getBoundingClientRect（）

三、返回值

该对象有6个属性：top,lef,right,bottom,width,height；

{
  bottom：430, //元素底部距离窗口顶部的距离 (等于 y + height)
  height:340, //元素的高度
  left:120, //元素左侧距离窗口左侧的距离
  right:460, //元素右侧距离窗口左侧的距离(等于 x + width)
  top:90, //元素顶部距离窗口的距离
  width:340, //元素的宽度
  x:120, //元素左上角相对于视口的横坐标
  y:90 //元素左上角相对于视口的纵坐标
}