Question

我有两个DIV，我需要知道它们的计算浏览器距离（高度）。我已经阅读了有关偏移功能的内容，但这些示例并非按照我尝试这样做的方式编写。

使用示例：

<div class="foo"></div>
<div class="bar"></div>

我想知道这两者之间的距离。

请帮我用jQuery动态找到距离。

Answer 1

这样的事情应该有效：

$('.foo').offset().top - $('.bar').offset().top

只要每个类在页面上只有一个元素如果它们不是唯一的，请为这两个元素提供ID和引用。

Answer 2

使用.offset()：

$('.foo').offset().top - $('.bar').offset().top

Answer 3

此函数查找两个元素中心之间的距离（以像素为单位），无jquery：

function distanceBetweenElems(elem1, elem2) {
    var e1Rect = elem1.getBoundingClientRect();
    var e2Rect = elem2.getBoundingClientRect();
    var dx = (e1Rect.left+(e1Rect.right-e1Rect.left)/2) - (e2Rect.left+(e2Rect.right-e2Rect.left)/2);
    var dy = (e1Rect.top+(e1Rect.bottom-e1Rect.top)/2) - (e2Rect.top+(e2Rect.bottom-e2Rect.top)/2);
    var dist = Math.sqrt(dx * dx + dy * dy);
    return dist;
}

我这样用：

var target1 = document.querySelector('#foo');
var target2 = document.querySelector('#bar');
if (distanceBetweenElems(target1,target2)<100){
     target1.classList.add('active');
}

使用jQuery查找两个DIV之间的距离？

3 个答案: