css - getBoundingClientRect 顶部属性返回错误值？

Question

我正在进入 div 元素的控制台顶部、左侧、右侧、底部属性:

var offSet = document.getElementById("div").getBoundingClientRect();  

为什么我得到的是 top 84 像素而不是 8 像素？

这是一个例子:https://codepen.io/Y-Taras/pen/zPjrWJ

附言在控制台中查看 4 个属性单击页面的任意位置

Answer 1

在 CodePen 中，主体中的脚本在触发 onload 事件之前执行。因此，您从 div(在全局 offSet 变量中)获得的信息来自它在 draggable 函数将跨度更改为绝对位置之前所处的位置。

(例如，您可以通过在分配 offSet 之前的代码中添加 alert() 来看到这一点。然后当 div 仍低于跨度。)

解决方法:在onmouseup函数中获取offSet信息，或者在onload事件中获取。