JavaScript 获取元素屏幕坐标：offsetTop 与 offsetLeft 原理及 findPos 实现

offset 属性与坐标计算原理

offset

在所有浏览器中，元素的 offsetTop 和 offsetLeft 属性都非常实用，它们提供了元素相对于其父元素的坐标位置信息。

该机制会向上遍历 offsetParent 链，累加 offsetTop 和 offsetLeft 的值。无论 offsetParent 位于何处，最终都能计算出元素在屏幕上的真实坐标。

原理解释

这段代码逻辑非常直观。首先传入需要计算坐标的目标元素，并初始化变量 curleft 和 curtop 为 0。

function findPos(obj) {
var curleft = curtop = 0;

若浏览器支持 offsetParent 属性，则执行以下逻辑：

if (obj.offsetParent) {

每当找到一个新的父级对象时，将其 offsetTop 和 offsetLeft 累加到 curtop 和 curleft 中：

do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;

技巧：利用赋值运算符返回值

以下是该技巧的具体实现：

} while (obj = obj.offsetParent);

这并非表达式错误。此处不使用 '==' 比较 obj 和 obj.offsetParent（因为元素与其父元素必然不相等，比较无意义）。

而是使用 '=' 将 obj.offsetParent 的值赋给 obj。关于此技巧的详细解释，可参考相关技术文档。

简单的返回逻辑

当元素不再拥有 offsetParent 时，循环结束。只要 offsetParent 存在，就会继续将 offsetLeft 加到 curleft，将 offsetTop 加到 curtop。

循环结束后，将计算得到的坐标返回给调用该函数的程序。

return [curleft,curtop];}

翻译地址：http://www.quirksmode.org/js/findpos.html

转载请保留以下信息

作者：北玉(tw:@rehawk)