getBoundingClientRect 获取某个元素相对于视窗的距离

大佬桑

于 2022-03-03 18:15:24 发布

阅读量229

点赞数

分类专栏：日常开发问题总结与反思

本文链接：https://blog.csdn.net/SSS01233210/article/details/123260643

版权

javascript 前端 html

日常开发问题总结与反思专栏收录该内容

42 篇文章 1 订阅

订阅专栏

getBoundingClientRect() 获取某个元素相对于视窗的距离

  Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

  如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。
如果box-sizing: border-box，元素的的尺寸等于 width/height。

  返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。
  除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
  例：Element.getBoundingClientRect().top;