使用内联offsetparent获取元素左/顶部的实际偏移量

Question

我正在尝试获取页面上元素的坐标.我一直在使用标准方法来获取它:

var el = element, pos = {x: 0, y: 0};
while ( el ) {
    pos.x += el.offsetLeft;
    pos.y += el.offsetTop;
    el = el.offsetParent;
}

但是当有问题的元素display: block和offsetParents之一有这个方法时,这个方法会失败display: inline;.这是由于此主题中描述的事实:

在尝试使用jQuery之后,事实证明他们的.offset()-method返回了正确的偏移量,并且我已经查看了源代码但是没有找到他们是如何做到的.所以我的问题是:我如何获得确切的位置？我不能在这个项目中使用jQuery,并且前面描述的线程中的方法很麻烦,添加元素和测试工作太多(性能透视),并且使用Element.getBoundingClientRect也不可用.

如果你想尝试一下,你可以去Apple.com打开你选择的调试器并键入以下内容:

var el, el2;
el = el2 = document.querySelector('#worldwide span');
var pos = {x: 0, y: 0};
while ( el2 ) {
    pos.x += el2.offsetLeft;
    pos.y += el2.offsetTop;
    el2 = el2.offsetParent;
}
alert("Calculated position: " + pos.x + "x" + pos.y + " window size: " + screen.width + "x" + screen.height);

使用此代码我得到:( Calculated position: 1354x988 window size: 1280x800即,左边的偏移是屏幕的方式,显然不是)

这怎么可能？任何解决方法的想法？约稿？它不一定非常精确,但必须比以前更好.谢谢.

编辑:这是为WebKit渲染引擎,澄清.

Answer 1

我最终选择了 WebKit 的window.webkitConvertPointFromNodeToPage，但我一直遇到一个错误，它会返回一个完全错误的位置。进一步的调查显示，如果有问题的节点是 display: inline，那么它将返回层次结构中最后一个块元素的位置。

搜索该图像的分辨率一无所获（我发现的只是有关 webkitConvertPointFromNodeToPage 实际执行的操作和 WebKit 源代码的非常基本的信息）。

通过猜测，我发现如果元素有 ，它会返回正确的位置display: inline-block，因此如果元素是内联的，那么我将其更改为内联块，然后计算位置。

如果有人对这个问题有更好的解决方案，我很乐意听取您的意见！

编辑：

事实证明，将显示样式更改为内联块并不总是一个好主意，因此我没有这样做，而是使用以下方法：

var offset = {x: 0, y: 0};
if ( getStyle(el, 'display') == 'inline' ) {
    offset.x = el.offsetLeft - el.parentNode.offsetLeft;
    offset.y = el.offsetTop - el.parentNode.offsetTop;
}

var point = window.webkitConvertPointFromNodeToPage(el, new WebKitPoint(0, 0));

return {
    x: Math.round(point.x + offset.x),
    y: Math.round(point.y + offset.y)
}

我正在获取内联子项的 offsetTop/Left 并从其父项中减去它。我不太确定它对具有 display: inline 的父母如何工作，但它在 90% 的情况下都有效。

但如果有人有更好的想法，我仍然愿意接受建议。