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

Question

我一直在编码一些Javascript以便随机在this page上放置一个ducky。

我想让它隐藏在对象的一面（比如帖子），但是我最终不得不硬编码很多，因为我无法正确检索相对的真实位置对象与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设置）工作，除上的对象。

有没有一个很好的，跨浏览器的方式来实现这一目标？

Answer 1

好的，我的问题在别的地方。这是我在做什么调用的函数：

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

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

你可以告诉我不这样用JavaScript的for循环递归行为，所以下面的代码实际上解决我的问题：

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); 
} 

谢谢大家的帮助:-)

Answer 2

这不适用于绝对定位，因为它不包括top和left（等等）。

我打算从jQuery中剔除部分代码并将其发布到此处，但它太扎根了。所以我只需要推荐使用jQuery！要做到这一点，只有这个在标记（在任何其他script标签）...

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

一旦你的参考，可以这么轻松的元素get the position ...

$(function() { 
    var pos = $(".className").position(); 
    alert(pos.top + "\n" + pos.left); 
}); 

Answer 3

我有一种情况，我在使用鼠标位置和对象时也不会很久以前，因为我需要一些拖放操作。所以这些是我想出的两种方法：

 
/** 
* 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 
    }; 
} 

我希望这可以帮助你。这适用于IE，Firefox和Chrome。