使用Chrome在Javascript中获取对象的真实位置

我已经编写了一些Javascript代码来随机放置一只鸭子

我想让它隐藏在对象的一侧（比如帖子），但最终我不得不硬编码了相当多的内容，因为我无法用Chrome找到正确检索相对对象真实位置的方法。我读了很多关于它的东西，并使用了递归offsetParent方法，但没有得到任何好的结果

我尝试的最后一段代码是：

 var getPost = function (obj) {
    var pos = {'x':0,'y':0};
    if(obj.offsetParent) {
        while(1) {
          pos.x += obj.offsetLeft;
          pos.y += obj.offsetTop;
          if(!obj.offsetParent) {
            break;
          }
          obj = obj.offsetParent;
        }
    } else if(obj.x) {
        pos.x += obj.x;
        pos.y += obj.y;
    }
    return pos;
  }

此代码在Chrome上不起作用，但在具有绝对位置（使用CSS设置）的对象上除外

---

有没有一种好的跨浏览器方法可以实现这一点？

这种方法不适用于绝对定位，因为它不考虑

顶部

和

左侧

（以及其他因素）

我本来打算从jQuery中删除这部分代码并发布在这里，但它太扎根了。所以我只能推荐使用jQuery！要做到这一点，只需将其放在标记中（在任何其他

脚本
标记之前）

我有一个例子，不久前我还在处理鼠标位置和对象，因为我需要一些拖放操作。这是我想出的两种方法：

/**
 * Calculates the mouse x and y position from the mouse move event fired by the document
 * 
 * @param event
 *            the mouse move event fired by the document
 * 
 * @return the mouse coordinates object with two variables x and y
 */
function mouseCoords(ev) {
  var event = ev;

  // IE does not pass the event object
  if (event == null)
    event = window.event;

  try {

    // normal style
    if (event.pageX) {
      return {
          x : event.pageX,
          y : event.pageY
      };
    }
    // IE style
    else {
      return {
          x : event.clientX + document.body.scrollLeft - document.body.clientLeft,
          y : event.clientY + document.body.scrollTop - document.body.clientTop
      };
    }

  } catch(ex) {

    // IE style
    return {
        x : event.clientX + document.body.scrollLeft - document.body.clientLeft,
        y : event.clientY + document.body.scrollTop - document.body.clientTop
    };
  }
}

/**
 * Calculates an object with the x and y coordinates of the given object
 * 
 * @param object
 *            the object of which the coordinates to be calculated
 * 
 * @return an object with x and y coordinates
 */
function getObjectPosition(object) {
  var left = 0;
  var top = 0;

  while (object.offsetParent) {

    left += object.offsetLeft;
    top += object.offsetTop;

    object = object.offsetParent;
  }

  left += object.offsetLeft;
  top += object.offsetTop;

  return {
      x : left,
      y : top
  };
}
/**
*根据文档触发的鼠标移动事件计算鼠标的x和y位置
* 
*@param事件
*文档触发的鼠标移动事件
* 
*@返回带有两个变量x和y的鼠标坐标对象
*/
功能鼠标命令（ev）{
var事件=ev；
//IE不传递事件对象
如果（事件==null）
event=window.event；
试一试{
//正常风格
如果（event.pageX）{
返回{
x:event.pageX，
y:event.pageY
};
}
//IE风格
否则{
返回{
x:event.clientX+document.body.scrollLeft-document.body.clientLeft，
y:event.clientY+document.body.scrollTop-document.body.clientTop
};
}
}捕获（ex）{
//IE风格
返回{
x:event.clientX+document.body.scrollLeft-document.body.clientLeft，
y:event.clientY+document.body.scrollTop-document.body.clientTop
};
}
}
/**
*使用给定对象的x和y坐标计算对象
* 
*@param对象
*要计算其坐标的对象
* 
*@返回具有x和y坐标的对象
*/
函数getObjectPosition（对象）{
左向量=0；
var-top=0；
while（object.offsetParent）{
左+=object.offsetLeft；
top+=object.offsetTop；
object=object.offsetParent；
}
左+=object.offsetLeft；
top+=object.offsetTop；
返回{
x:左，
y:顶
};
}
我希望这能帮助你。这在IE、Firefox和Chrome中都适用。
好吧，我的问题出在其他地方。这就是我调用函数所做的：

var allPosts = document.getElementsByClassName('post-outer');

for (post in allPosts) {
   console.log('Post has position '+getPos(post));
}

可以看出，我不太习惯for循环中Javascript的递归行为，因此下面的代码实际上解决了我的问题：

var allPosts = document.getElementsByClassName('post-outer');

for (var i=0, len=allPosts.length; i<len; ++i ){
  console.log('Post position is '+getPos(allPosts[i]).y);
}

var allPosts=document.getElementsByClassName（'post-outer'）；
对于（var i=0，len=allPosts.length；我考虑过使用jQuery吗？我没有考虑过，因为我想保持它的简单性，而且它在博客上。也就是说，它可能是一个选项。问题中提供的超链接不可用。您可能想编辑它。这看起来是一个不错的解决方案，不幸的是，我需要使用多个与cla匹配的元素ss，所以我使用getElementsByClassName，返回的元素不支持position（）方法。这与我目前正在做的几乎相同。我的问题似乎是offsetParent在某个点失败，所以这个函数（或我以前使用的函数）对于我正在使用它的元素返回NaN。Javascript“in”关键字的工作方式与第一个示例中使用的不一样。请将
console.log（'Post has position'+getpost（Post））；
更改为
console.log（'Post has position'+getpost（allPosts[Post]）；
。“in”关键字遍历对象上的每个键，而不是值。这就是为什么第二个循环有效，第一个循环无效。是的，这很愚蠢。请查看Javascript愚蠢的轻量级解决方案。
var allPosts = document.getElementsByClassName('post-outer');

for (post in allPosts) {
   console.log('Post has position '+getPos(post));
}

var allPosts = document.getElementsByClassName('post-outer');

for (var i=0, len=allPosts.length; i<len; ++i ){
  console.log('Post position is '+getPos(allPosts[i]).y);
}