我有两个 DIV,我需要知道它们的计算浏览器距离(高度)。我已经阅读了有关偏移功能的信息,但这些示例并不是针对我尝试执行此操作的方式编写的。
示例用法:
<div class="foo"></div>
<div class="bar"></div>
我想知道这两者之间的距离。
请帮助我使用 jQuery 动态查找距离。
我有两个 DIV,我需要知道它们的计算浏览器距离(高度)。我已经阅读了有关偏移功能的信息,但这些示例并不是针对我尝试执行此操作的方式编写的。
示例用法:
<div class="foo"></div>
<div class="bar"></div>
我想知道这两者之间的距离。
请帮助我使用 jQuery 动态查找距离。
像这样的东西应该工作:
$('.foo').offset().top - $('.bar').offset().top
只要每个类在页面上只有一个元素。
如果它们不是唯一的,则给这两个元素一个 ID 和引用。
使用.offset()
:
$('.foo').offset().top - $('.bar').offset().top
此函数查找两个元素中心之间的像素距离,没有 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');
}