DOM 中两个元素之间的距离（以 px 为单位）答案

【问题标题】：Distance (in px) between two elements in the DOMDOM 中两个元素之间的距离（以 px 为单位）
【发布时间】：2013-10-30 07:48:24
【问题描述】：

如何获取 DOM 中两个元素之间的距离？

我正在考虑使用getBoundingClientRect，但我看不到如何使用它来计算两个元素之间的距离。因此，例如，a 与 . 的距离有多近。

【问题讨论】：

你想找出两个元素左上角的区别吗？
我实际上正在寻找找到距离的最佳方法。我不确定是否会找到两个元素的左上角之间的差异。理想情况下不是两个元素的中心吗？
取决于你的最终目标是什么。但我会根据这个来回答

标签： javascript dom

【解决方案1】：

假设您有一个 id 为 div1 的 div 和一个 id 为 div2 的 div。您可以通过一些简单的数学计算从div1 的中心到div2 的中心的距离（以像素为单位）...

// get the bounding rectangles
var div1rect = $("#div1")[0].getBoundingClientRect();
var div2rect = $("#div2")[0].getBoundingClientRect();

// get div1's center point
var div1x = div1rect.left + div1rect.width/2;
var div1y = div1rect.top + div1rect.height/2;

// get div2's center point
var div2x = div2rect.left + div2rect.width/2;
var div2y = div2rect.top + div2rect.height/2;

// calculate the distance using the Pythagorean Theorem (a^2 + b^2 = c^2)
var distanceSquared = Math.pow(div1x - div2x, 2) + Math.pow(div1y - div2y, 2);
var distance = Math.sqrt(distanceSquared);

【讨论】：

这个答案正在使用 jQuery...但是如果您不想使用 jQuery，您可以将前 2 行替换为 var div1rect = document.getElementById("div1").getBoundingClientRect(); ...etc
我基本上需要距离来估计网站上的“价格”与该网站所针对的产品价格的可能性有多大。我想计算产品图片（我知道它在哪里）与页面周围所有价格之间的距离。最接近产品图片的价格很可能是该产品的价格:)
我正在尝试。我会回来告诉你的。谢谢:)
感谢您的回答。这里的问题是某些元素（跨度）没有宽度/高度。
您能控制 HTML 吗？如果没有，我会找到另一种方法来获得合理的价格位置，也许只使用顶部/左侧而不使用宽度/高度来获得中心点。