如何判断HTML元素数组中元素间距离是否在0-5px范围内？

我有一个HTML元素数组，需要检查数组中的character元素是否和每个enemies元素足够接近。要求当character与enemies[i]的top、left属性值差距在0px到5px之间时，if条件返回true。当前实现代码如下：

function killenemy() {      
  for(let i = 0; i < enemies.length; i++) {
     if((character.style.top == enemies[i].style.top) && (character.style.left == enemies[i].style.left)){
       console.log('enemy is closer than 5px');
     }
  }
}

修正后的实现 #

原代码的问题在于直接用字符串相等判断位置，只有当角色和敌人的位置完全重合时才会触发，不符合"0-5px差距"的需求。下面是修正后的代码：

function killenemy() {      
  // 提取角色的位置数值（移除px单位）
  const charTop = parseInt(character.style.top, 10);
  const charLeft = parseInt(character.style.left, 10);

  for(let i = 0; i < enemies.length; i++) {
    // 提取当前敌人的位置数值
    const enemyTop = parseInt(enemies[i].style.top, 10);
    const enemyLeft = parseInt(enemies[i].style.left, 10);

    // 计算位置的绝对差值
    const topDiff = Math.abs(charTop - enemyTop);
    const leftDiff = Math.abs(charLeft - enemyLeft);

    // 判断差值是否在0-5px范围内
    if(topDiff <= 5 && leftDiff <= 5){
      console.log('enemy is closer than 5px');
    }
  }
}

关键说明 #

• 字符串转数值：style.top返回的是带px后缀的字符串（比如"30px"），必须用parseInt转成数字才能进行差值计算。
• 绝对差值判断：用Math.abs()获取差值的绝对值，确保正负方向的差距都能被正确检测。
• 边界处理：条件中直接判断差值≤5即可，因为绝对值本身≥0，无需额外判断。

补充：获取实际渲染位置（更可靠） #

如果元素的位置不是通过内联样式设置的（比如用CSS类、布局流控制），style.top可能返回空字符串，这时候应该用getBoundingClientRect()获取元素实际渲染的位置：

function killenemy() {      
  // 获取角色实际渲染的位置
  const charRect = character.getBoundingClientRect();
  const charTop = charRect.top;
  const charLeft = charRect.left;

  for(let i = 0; i < enemies.length; i++) {
    // 获取当前敌人实际渲染的位置
    const enemyRect = enemies[i].getBoundingClientRect();
    const enemyTop = enemyRect.top;
    const enemyLeft = enemyRect.left;

    const topDiff = Math.abs(charTop - enemyTop);
    const leftDiff = Math.abs(charLeft - enemyLeft);

    if(topDiff <= 5 && leftDiff <= 5){
      console.log('enemy is closer than 5px');
    }
  }
}

这个方法能拿到元素相对于视口的真实位置，不受样式设置方式影响，适用性更广。

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