js 获取当前元素距离窗口的距离

最新推荐文章于 2024-03-05 17:01:22 发布

yuange11111

最新推荐文章于 2024-03-05 17:01:22 发布

阅读量2.3w

点赞数 19

CC 4.0 BY-SA版权

分类专栏：前端工程化

本文链接：https://blog.youkuaiyun.com/qq_38296051/article/details/103986022

前端工程化专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个精确且兼容性良好的方法，getBoundingClientRect，用于获取DOM元素到视口左侧和顶部的距离。此方法返回的值相对于视口，适用于各种浏览器，包括IE4。文章详细解释了如何使用该方法，并提醒注意页面滚动位置变化对结果的影响。

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

获取dom到body左侧和顶部的距离-getBoundingClientRect

平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。

这个方法就是 getBoundingClientRect。

1.getBoundingClientRect方法简介

getBoundingClientRect 返回的是一个 DOMRect 对象，是一组矩形集合，我们这次所使用的返回值主要是left、top、bottom和right。其余的返回值width、height、x、y这次用不到,就不再讨论。

使用方法如下：

let domToTop = dom.getBoundingClientRect().top  // dom 的顶边到视口顶部的距离
let domToLeft = dom.getBoundingClientRect().left // dom 的左边到视口左边的距离
let domToBottom = dom.getBoundingClientRect().bottom // dom 的底边到视口顶部的距离
let domToRight = dom.getBoundingClientRect().right // dom 的右边到视口左边的距离

注意事项：

得到的值是相对于视口而言的，即如果页面的滚动位置发生变化，那么得到的top、left也会发生变化；如果需要计算到body边框的距离，需要再加上网页滚动条的长度。下面会给出完整例子。
这个方法返回的四个值都是相对于当前视口的左上角而言的。即top和bottom是dom的顶边和底边到视口的顶部的距离，同理left和right是相对于视口左边的距离。
scrolltop 和 offsettop 是距离父元素的。