DOM中兩個元素之間的距離（以像素爲單位）

Question

如何獲取DOM中兩個元素之間的距離？

我正在考慮使用getBoundingClientRect，但我沒有看到如何使用它來計算兩個元素之間的距離。所以，舉個例子，離一個人有多近。

Answer 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);