js获取文档区域中文档的（水平和垂直）坐标的两种方法

从页面到文档区域文档获取元素的水平坐标和垂直坐标的两种方法及其比较
在JS控制元素运动的过程中，经常用到页面元素坐标位置的获取。以下是两种方法：

1：叠加元素对象及其offsetparent（如果存在）offsetleft / offsettop属性来实现
在阅读了Javaｓｃｒｉｐｔ的高级编程第三版DOM的一部分，我知道到页面上的元素的偏移量，我们需要添加这些元素的offsetleft和offsettop到offsetparent相同的属性，并保持循环到根元素。因此，获得元素的坐标文件区，我们只需要不断获得offsetleft / offsettop的offsetparent通过while循环，直到offsetparent = null。
JS代码：
复制代码代码如下所示：
获取/协调区域文档元素
功能getposition（元）{
无功actualleft = element.offsetleft，
actualtop = element.offsettop，
电流= element.offsetparent； / /获取元素offsetparent
已循环到根元素。
而（当前！= NULL）{
actualleft = current.offsetleft；
actualtop = current.offsettop；
电流= current.offsetparent；
}
包含左、顶坐标的对象返回
返回{
左：actualleft，
上图：actualtop
}；
}

Example screenshot:

Firebug test results screenshot: (Note: other browsers have passed the test!)

二：通过getboundingclientrect（）方法的实现
的getboundingclientrect法得到的左、上、右的位置，和相对较低的浏览器窗口在页面中某个元素的页，则返回一个对象，它有四个属性：上，左，右，下。该方法最初是IE，但ff3.0 +和opera9.5 +支持这一方法。可以说，该方法大大提高了获取页面元素位置的效率，而且避免了while循环的使用，但直接获得数值，优于第一种方法，特别是在复杂页面上。
JS代码：
复制代码代码如下所示：
获取/协调区域文档元素
功能getposition（元）{
var =文档，
REC = element.getboundingclientrect（），
_x = rec.left /窗口浏览器窗口元素相对左和坐标
_y = rec.top；
使用HTML或体元素滚动距离是与文档区域的位置相对应的元素之和。
_x = dc.documentelement.scrollleft dc.body.scrollleft | |；
_y = dc.documentelement.scrolltop dc.body.scrolltop | |；
返回{
左：_x，
上图：_y
}；
}

经过测试，该方法与获取文档元素的第一个方法具有相同的大小，IE浏览器的IE版本也存在一些差异。

注意：记住添加HTML（IE除外）或正文（ie）元素的水平滚动或垂直滚动距离！
结论：以上是相对于文档的文档的位置坐标作了阐述如何获取元素，如有问题，可直接与我联系或评论，此外，协调并获取坐标右下简单的离开，对宽度和高度大小元素（元素上坐标。offsetwidth（元）。offsetheight）可以补充说，当然，offsetwidth offsetheight属性边界要素会计计算内部利润，，所以最好的办法是通过getboundingclientrect method.ps：加一点，并使用该方法返回的对象的右左=元素的宽度；自下而上=元高度。你可以得到宽没有边界的元素本身的高度。