如何在javascript中获取元素的真实位置

Question

我想在 javascript（或 jquery 短代码）中获得我的样式元素的真实 X 和 Y 位置。

 var offset = obj.offset();
  ox=offset['left'];
  oy=offset['top'];

  px=parseInt(obj.css('padding-left')); // padding left
  py=parseInt(obj.css('padding-top')); // padding top
  bx=parseInt(obj.css('border-width') ); // stroke value
  ox=ox+px+bx;
  oy=oy+py+bx;

但是这个代码有时不起作用..

当 scrool top 或 scroll left change im not get real position :(

请帮我..

原文由 Mahmut Duman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不必使用偏移量。使用现代的 getBoundingClientRect 功能：

 function getPosition( element ) {
    var rect = element.getBoundingClientRect();
    return {
        x: rect.left,
        y: rect.top
    };
}

然后你可以像这样使用上面的函数：

 var element = document.getElementById( 'myElement' );
var pos = getPosition( el );

// Alert position in X axis
alert( pos.x );

// Alert position in Y axis
alert( pos.y );

适用于所有浏览器🙂

编辑： 如果您想要元素相对于页面滚动的位置，只需将 document.body.scrollTop 添加到 Y 位置并将 document.body.scrollLeft 添加到 X 位置。

原文由 Sayan J. Das 发布，翻译遵循 CC BY-SA 4.0 许可协议