javascript 测量两个 HTML 元素中心之间的距离
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17628456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Measure distance between two HTML elements' centers
提问by tenstar
If I have HTML elements as follows:
如果我有如下 HTML 元素：
<div id="x"></div>
<div id="y" style="margin-left:100px;"></div>
...how do I find the distance between them in pixels using JavaScript?
...如何使用 JavaScript 以像素为单位找到它们之间的距离？
回答by alex
Get their positions, and use the Pythagorean Theorem to determine the distance between them...
得到他们的位置，并使用勾股定理来确定他们之间的距离......
function getPositionAtCenter(element) {
const {top, left, width, height} = element.getBoundingClientRect();
return {
x: left + width / 2,
y: top + height / 2
};
}
function getDistanceBetweenElements(a, b) {
const aPosition = getPositionAtCenter(a);
const bPosition = getPositionAtCenter(b);
return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);
}
const distance = getDistanceBetweenElements(
document.getElementById("x"),
document.getElementById("y")
);
If you browser doesn't support Math.hypot(), you can use instead:
如果您的浏览器不支持Math.hypot()，您可以使用：
Math.sqrt(
Math.pow(aPosition.x - bPosition.x, 2) +
Math.pow(aPosition.y - bPosition.y, 2)
);
The Pythagorean Theorem relates to the relationship between the sides of a right-angled triangle.
勾股定理涉及直角三角形各边之间的关系。
The elements are plotted on a Cartesian coordinate system(with origin in top left), so you can imagine a right-angled triangle between the elements' coordinates (the unknown side is the hypotenuse).
元素绘制在笛卡尔坐标系上（原点在左上角），因此您可以想象元素坐标之间的直角三角形（未知边是斜边）。
You can modify the equation to get the value of cby getting the square root of the other side.
您可以c通过获取另一边的平方根来修改方程以获取 的值。
Then, you simply plug the values in (the xand yare the differences between the elements once their centers are determined) and you will find the length of the hypotenuse, which is the distance between the elements.
然后，您只需将值（中x和y是一旦他们的中心确定元素之间的差异），你会发现斜边，这是元素之间的距离的长度。
回答by vladkras
as far as div's are now empty, the basic idea is to measure the distance between their left top corners
至于 div 现在是空的，基本思想是测量它们左上角之间的距离
distX = y.offsetLeft - x.offsetLeft;
distY = y.offsetTop - x.offsetTop;
distance = Math.sqrt(distX*distX + distY*distY);
alert(Math.floor(distance));
but you have to substract first div's height and width, if you put something inside. This method has some issues with support and border width of elements in different browsers.
但是你必须减去 firstdiv的高度和宽度，如果你在里面放了一些东西。此方法在不同浏览器中元素的支持和边框宽度方面存在一些问题。
anyway take a look at Fiddle
无论如何看看Fiddle
Note, that even with content (if you don't change it with css) divs will be 100% width, so if you want just to measure br's height use:
请注意，即使有内容（如果您不使用 css 更改它），div 也将是 100% 宽度，因此如果您只想测量br的高度，请使用：
distance = = y.offsetTop - x.offsetTop;
