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

问题描述：

我正在考虑使用getBoundingClientRect，但我没有看到如何使用它来计算两个元素之间的距离。所以，举个例子，离一个人有多近。

你试图找到这两个元素的左上边角之间的区别？ –

我实际上正在寻找找到距离的最佳方式。我不知道是否找到两个元素左上角的区别。理想情况下，这两个元素的中心不是？ –

取决于你的最终目标是什么。但我会根据这个答案 –

答

假装你有一个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（）;'...... etc –

我基本上需要距离来估计网站上的“价格”可能是网站产品的价格。我想计算产品图片（我知道它在哪里）与页面周围的所有价格之间的距离。与产品图片最接近的价格可能是该产品的价格:) –

此代码是否可用？ –

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

相关推荐