如何在JavaScript中获取HTML元素的CSS translateY属性值？

我在HTML和CSS中实现了一个沿Y轴下落、可显示隐藏的对象，位置每1秒更新一次，JS每隔1秒创建并移动该下落对象，机制类似俄罗斯方块。目前translateY数值每次增加30px，我编写了hitJudge函数，期望当translateY达到600px且按下按键时，控制台输出'hit'，但当前条件判断逻辑未生效，怀疑是属性值获取方式有问题。

原代码如下：

<div class="falling-object" style="transform: translateY(360px);"><img src="./assets/note.jpg"></div>

function hitJudge(keyPressed) {
  // Check if a note element is present
  let note = document.querySelector('.falling-object');

  // Get the computed style of the falling object
  let computedStyle = window.getComputedStyle(note);
  let translateY = computedStyle.getPropertyValue('transform').split(',')[5].trim();

  // Check if the falling object's position is at the desired translateY value, note is true, and keyPressed is true
  if (translateY === '600px' && keyPressed === true) {
    console.log('hit');
  } else {
    console.log('miss');
  }
}

问题原因分析 #

1. transform值解析错误：通过split(',')[5]提取的translateY值是纯数字（不带px单位），比如当transform为translateY(600px)时，计算后的矩阵是matrix(1, 0, 0, 1, 0, 600)，split后的第5项是600，而非600px，所以你的判断条件translateY === '600px'永远无法成立。
2. 未处理元素不存在的情况：如果下落对象被移除或尚未创建，document.querySelector('.falling-object')会返回null，调用getComputedStyle会直接报错，导致函数中断。
3. 严格匹配的时机问题：用户按键时机和对象位置更新的1秒间隔很难完全同步，严格等于600px的判断容错率极低，容易错过触发条件。

解决方法 #

方法一：正确解析transform矩阵数值 #

function hitJudge(keyPressed) {
  let note = document.querySelector('.falling-object');
  // 先判断元素是否存在
  if (!note) {
    console.log('no note');
    return;
  }

  let computedStyle = window.getComputedStyle(note);
  let transformMatrix = computedStyle.getPropertyValue('transform');
  // 提取矩阵中的translateY数值（不带单位）
  let translateY = parseFloat(transformMatrix.split(',')[5] || 0);

  // 增加容错范围，允许±15px的误差，适配按键时机
  if (Math.abs(translateY - 600) <= 15 && keyPressed) {
    console.log('hit');
  } else {
    console.log('miss');
  }
}

方法二：直接从元素style属性提取（适用于JS直接设置transform的场景） #

如果你的下落逻辑是通过JS直接修改元素的style.transform（比如note.style.transform = translateY(${y}px)``），可以直接从style属性中提取数值，更高效：

function hitJudge(keyPressed) {
  let note = document.querySelector('.falling-object');
  if (!note) {
    console.log('no note');
    return;
  }

  // 匹配translateY后的数值部分
  let translateYMatch = note.style.transform.match(/translateY\((\d+)px\)/);
  let translateY = translateYMatch ? parseInt(translateYMatch[1]) : 0;

  // 同样增加容错范围
  if (Math.abs(translateY - 600) <= 15 && keyPressed) {
    console.log('hit');
  } else {
    console.log('miss');
  }
}

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