当前位置：文江博客话题详情

纯 Javascript 中的元素坐标

发布于 2024-11-25 14:50:13 字数 109 浏览 1 评论 0原文

假设我在 div 中有一个元素（或任何其他包含元素，或者可能只是在文档正文中）。如何获取该元素相对于其容器的 (x,y) 坐标？

我需要能够用纯 Javascript 来完成它......

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陈甜 2024-12-02 14:50:13

offsetTop 和 offsetLeft 属性是相对于 offsetParent 的，因此您可以免费获取元素相对于其父元素的位置。如果您想要相对于整个 body 的位置，那么您需要遍历 offsetParent 链并对值求和。

下面的函数可以完成这个任务：

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

The offsetTop and offsetLeft properties are relative to offsetParent so you can get an element's position relative to its parent for free. If you want the position relative to the entire body then you need to traverse the offsetParent chain and sum the values.

The following function accomplishes this:

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

回复收藏 0 原文

七分※倦醒 2024-12-02 14:50:13

使用下面的

document.getElementById("elementId").offsetTop;
document.getElementById("elementId").offsetLeft;

Use the below

document.getElementById("elementId").offsetTop;
document.getElementById("elementId").offsetLeft;

回复收藏 0 原文

风铃鹿 2024-12-02 14:50:13

脱离 ShankarSangoli 的帖子，它可以这样扩展。获取父级（容器）和子级（有问题的元素）之间的差异：

var parentOffsetTop = document.getElementById("parentId").offsetTop;
var parentOffsetLeft = document.getElementById("parentId").offsetLeft;
var childOffsetTop = document.getElementById("childId").offsetTop;
var childOffsetLeft = document.getElementById("childId").offsetLeft;

var xOffset = parentOffsetLeft - childOffsetLeft;
var yOffset = parentOffsetTop - childOffsetTop;

编辑：似乎我错了，offsetLeft 和 offsetTop 无论如何都是基于父级的。您不需要手动执行此操作！

Going off of ShankarSangoli's post, it can be expanded this way. Get the difference between the parent (container) and the child (element in question):

var parentOffsetTop = document.getElementById("parentId").offsetTop;
var parentOffsetLeft = document.getElementById("parentId").offsetLeft;
var childOffsetTop = document.getElementById("childId").offsetTop;
var childOffsetLeft = document.getElementById("childId").offsetLeft;

var xOffset = parentOffsetLeft - childOffsetLeft;
var yOffset = parentOffsetTop - childOffsetTop;

EDIT: seems I was mistaken, offsetLeft and offsetTop are based off of the parent anyway. You do not need to do this manually!

回复收藏 0 原文

~没有更多了~