如何获得两个div之间的距离答案

【问题标题】：How to get distance between two divs如何获得两个div之间的距离
【发布时间】：2012-10-01 09:54:49
【问题描述】：

所以我有一个 div 在另一个里面 - 我怎样才能得到它们之间的距离？

我尝试了类似$('#child').parentsUntil($('#parent')).andSelf() 的方法 - 但它返回的是一个对象，而不是距离。

附：我需要它来按下其他按钮。

【问题讨论】：

尝试使用$("#child").position().left 进行测试，如果需要，从该值中减去$("#parent").position().left。

标签： javascript jquery jquery-mobile

【解决方案1】：

http://api.jquery.com/position/

要获得您可以使用的左侧距离：

var distLeft = $('#child').position().left;

这将返回px 中相对于偏移父级的距离

如果您对元素的页面偏移量感兴趣的话：

var offsLeft = $('#child').offset().left;

http://api.jquery.com/offset/

【讨论】：

【解决方案2】：

有这个很棒的getBoundingClientRect 函数。其他都只是a-b

https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

【讨论】：

【解决方案3】：

您可以使用offset

  var childOffset = $('#child').offset(), parentOffset = $('#child').parentsUntil($('#parent')).offset();
    var leftDistance  =childOffset.left - parentOffset.left;
    var topDistance = childOffset.top- parentOffset.top;

【讨论】：

offset() 是恕我直言最好的解决方案，因为它甚至能够获得两个完全不相关的对象之间的距离：function distance(el1, el2) { var o1 = $(el1).offset(); var o2 = $(el2).offset(); return { left: o2.left - o1.left, top: o2.top - o1.top }; }

【解决方案4】：

你尝试过类似的东西吗？

 $('innerDiv').position().left;

【讨论】：