为什么JavaScript的if条件中无法正确匹配CSS设置的transform属性值

• 核心问题出在样式读取逻辑错误：element.style 系列API只能读取元素行内style属性中定义的样式，你代码里的transform: translateX(0px)是写在外部CSS的.items类规则中，不属于行内样式，因此item4.style.transform读取结果为空字符串，永远无法匹配判断条件，逻辑自然不触发。
• 额外注意：浏览器读取计算后的transform属性时，会默认转换成matrix()矩阵格式，直接判断字符串translateX(0px)即使读对了样式也不会匹配。

直接使用getComputedStyle读取元素最终生效的计算样式，再用DOMMatrix解析矩阵得到X轴偏移量判断即可，修改后的JS代码如下：

// 建议声明变量避免全局污染
const item4 = document.getElementsByClassName('items')[3]

function leftarrow() {
  // 获取元素最终生效的所有计算样式
  const computedStyle = window.getComputedStyle(item4)
  // 解析transform矩阵
  const transformMatrix = new DOMMatrix(computedStyle.transform)
  // 矩阵的e属性对应X轴平移的像素值
  if (transformMatrix.e === 0) {
    console.log("Hello World")
  }
}

如果你的业务场景中会有小数偏移的情况，也可以调整判断条件为Math.abs(transformMatrix.e) < 0.1 避免精度问题。

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