如何计算两个DOM元素指定角点之间的距离？

你当前代码计算的是元素中心点的距离，而非目标角点，这就是结果偏移的原因。要精确计算指定角点的距离，只需调整坐标获取逻辑，直接拿到对应角点的视口坐标即可。

修改后的代码 #

// 获取元素指定角点的视口坐标
function getPositionAtCorner(element, corner) {
  const { top, left, width, height } = element.getBoundingClientRect();
  
  switch(corner) {
    case 'top-left':
      return { x: left, y: top };
    case 'top-right':
      return { x: left + width, y: top };
    case 'bottom-right':
      return { x: left + width, y: top + height };
    case 'bottom-left':
      return { x: left, y: top + height };
    default:
      throw new Error('无效的角点类型，请传入 "top-left"、"top-right"、"bottom-right" 或 "bottom-left"');
  }
}

// 计算两个元素指定角点间的距离
function getDistanceBetweenElements(a, aCorner, b, bCorner) {
  const aPos = getPositionAtCorner(a, aCorner);
  const bPos = getPositionAtCorner(b, bCorner);
  
  return Math.hypot(aPos.x - bPos.x, aPos.y - bPos.y);
}

使用示例 #

比如计算元素A的右上角到元素B的左下角的距离：

const elemA = document.getElementById('element-a');
const elemB = document.getElementById('element-b');
const distance = getDistanceBetweenElements(elemA, 'top-right', elemB, 'bottom-left');
console.log('角点距离：', distance);

关键说明 #

• getBoundingClientRect()返回的是元素在视口中的实际渲染位置，包含transform、padding、border等影响，坐标值是精确的。
• Math.hypot函数本身不会产生计算误差，之前的偏移完全是因为你取了元素中心而非目标角点。
• 调用时确保角点参数拼写正确，避免抛出错误。

内容的提问来源于stack exchange，提问作者Mert