js获取元素到文档区域document的(横向、纵向)坐标的两种方法

最新推荐文章于 2022-11-03 18:17:55 发布

jingtian678

最新推荐文章于 2022-11-03 18:17:55 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web大前端

本文链接：https://blog.youkuaiyun.com/jingtian678/article/details/98974783

web大前端专栏收录该内容

291 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript获取页面元素相对于文档区域的坐标位置，包括元素的左、上、右、下四个方向的坐标计算方法，并特别指出在计算时需累加html或body元素的滚动距离。此外，文章还提到了利用getBoundingClientRect方法获取更精确的元素尺寸。

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

// 获取元素到文档区域的坐标
function getPosition(element){
var dc = document,
rec = element.getBoundingClientRect(),
x = rec.left, // 获取元素相对浏览器视窗window的左、上坐标
y = rec.top;
// 与html或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置
x += dc.documentElement.scrollLeft || dc.body.scrollLeft;
y += dc.documentElement.scrollTop || dc.body.scrollTop;
return {
left: x,
top: y
};
}
注意：记得要累加上html(IE除外)或body(针对IE)元素的水平或垂直滚动距离！
结语：上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述，如遇到相关问题，可联系本人或直接发表评论，另外，对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可，当然offsetWidth、offsetHeight属性会计算元素的内边距、边框，所以最好的办法还是通过getBoundingClientRect方法来获取。ps：补充一点，利用该方法返回对象的right-left = 元素宽度；bottom-top = 元素高度。可以获取不带边框的元素本身的宽度和高度。