Javascript DOM中两个元素之间的距离（px）

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

---

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

假设您有一个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，你可以用

var div1rect=document.getElementById（“div1”）.getBoundingClientRect（）替换前两行…etcI基本上需要距离来估计站点上的“价格”与该站点所针对的产品价格的可能性。我想计算产品图像（我知道它在哪里）和页面周围所有价格之间的距离。最接近产品形象的价格可能是该产品的价格：）我正在尝试。我会回来告诉你的。谢谢你的回答。这里的问题是某些元素（span）没有宽度/高度。您是否控制HTML？如果没有，我会找到另一种方法来获得价格的合理位置，可能只是使用顶部/左侧，而不是使用宽度/高度来获得中心点。