DOM对象的jQuery x y文档坐标答案

【问题标题】：jQuery x y document coordinates of DOM objectDOM对象的jQuery x y文档坐标
【发布时间】：2010-11-03 10:16:11
【问题描述】：

我需要获取 DOM 元素的 X、Y 坐标（相对于文档的顶部/左侧）。我找不到任何可以给我这些的插件或 jQuery 属性或方法。我可以获取 DOM 元素的顶部和左侧，但这可以相对于其当前容器/父级或文档。

【问题讨论】：

标签： javascript jquery user-interface location

【解决方案1】：

~~你可以使用Dimensions插件~~ [已弃用...包含在jQuery 1.3.2+中]

offset()
获取第一个匹配元素的当前偏移量，以像素为单位，相对于文档。

position()
获取元素相对于其偏移父项的顶部和左侧位置。

知道了这一点，那么就很容易了...（使用我的小svg project 作为example page）

var x = $("#wrapper2").offset().left;
var y = $("#wrapper2").offset().top;

console.log('x: ' + x + ' y: ' + y);

输出：

x: 53 y: 177

希望它对您正在寻找的内容有所帮助。

这是 offset() 和 position() 的图像

使用XRay

使用Web Developer工具栏

【讨论】：

参见：docs.jquery.com/Plugins/dimensions“已弃用：从 jQuery 1.2.6 开始，维度插件已合并到核心中。您可以在 CSS 类别中查看完整文档。”另外，这只是相对的职位
如果您在项目的该页面上运行该代码，您可以验证它不是相对的，而是绝对值。
看起来他们已经在更新的 jQuery 版本中解决了这些问题。使用 1.3.2 似乎可以像我希望的那样给文档 x,y 坐标。我在 IE7、FF3 和 Safari3 中对此进行了测试，它们似乎都表现正确
刚刚遇到另一个异常。它不考虑您选择的元素的边距。所以要获得可视元素的视觉 x,y...我需要添加它们。
@balexandre 你觉得你能帮我解决这个问题吗：stackoverflow.com/questions/19100184/…

【解决方案2】：

我的解决方案是一个带有“解决方法”的插件 :+D 。但有效！

jQuery.fn.getPos = function(){
        var o = this[0];
        var left = 0, top = 0, parentNode = null, offsetParent = null;
        offsetParent = o.offsetParent;
        var original = o;
        var el = o;
        while (el.parentNode != null) {
            el = el.parentNode;
            if (el.offsetParent != null) {
                var considerScroll = true;
                if (window.opera) {
                    if (el == original.parentNode || el.nodeName == "TR") {
                        considerScroll = false;
                    }
                }
                if (considerScroll) {
                    if (el.scrollTop && el.scrollTop > 0) {
                        top -= el.scrollTop;
                    }
                    if (el.scrollLeft && el.scrollLeft > 0) {
                        left -= el.scrollLeft;
                    }
                }
            }            
            if (el == offsetParent) {
                left += o.offsetLeft;
                if (el.clientLeft && el.nodeName != "TABLE") {
                    left += el.clientLeft;
                }
                top += o.offsetTop;
                if (el.clientTop && el.nodeName != "TABLE") {
                    top += el.clientTop;
                }
                o = el;
                if (o.offsetParent == null) {
                    if (o.offsetLeft) {
                        left += o.offsetLeft;
                    }
                    if (o.offsetTop) {
                        top += o.offsetTop;
                    }
                }
                offsetParent = o.offsetParent;
            }
        }
        return {
            left: left,
            top: top
        };
    };

用法：

var p = $("#wrapper2").getPos();
alert("top:"+p.top+"; left:"+p.left);

【讨论】：

你知道有框架只是为了我们不需要重写代码，对吧？
在您必须编写用户脚本之前，框架都很棒。或者当你想为 jQuery 编写补丁时；还是有理由知道javascript的。

【解决方案3】：

offset 函数将为您完成这项工作。

这是他们给出的例子：

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

【讨论】：