JavaScript 如何正确编写if判断实现div平移超200px后自动消失

现有逻辑的核心错误 #

• 比较运算符误用：判断条件里使用了单等号=（赋值操作）而非比较运算符。按照JS运算符优先级，原判断语句的实际执行流程为：
  1. 先完成字符串比较"translate(200px)" > "200px"：JS对字符串的大小判断按ASCII码逐位对比，两个字符串的首字符分别是't'和'2'，'t'的ASCII值远大于'2'，因此这个比较直接返回布尔值true
  2. 再将返回的true赋值给元素的style.transform属性
  3. 整个if条件的最终值为true，因此无论实际移动距离多少，元素都会直接进入隐藏分支
• 字符串比较逻辑完全无效：JS中两个字符串的大小对比是按字典序判定的，不会自动提取字符串内嵌的像素值做数值比较，这种写法永远无法得到想要的位移判断结果
• 逻辑顺序颠倒：代码先将元素直接移动到200px位置，再执行判断，完全不符合“位移超过200px才隐藏”的规则

正确实现 #

最稳妥的方式是自己维护元素的水平位移数值，不要硬解析DOM上拼接的transform字符串，避免属性格式变动带来的解析错误：

// 记录元素当前的水平位移值
let currentOffset = 0;
const blueBox = document.getElementById("blue");

function moveRight() {
    // 每次点击累计增加200px位移
    currentOffset += 200;
    blueBox.style.transform = `translate(${currentOffset}px)`;
    blueBox.style.transition = "0.5s";

    // 直接基于数值做判断，规避字符串解析的问题
    if (currentOffset > 200) {
        blueBox.style.display = "none";
    } else {
        blueBox.style.display = "block";
    }
}

function appear() {
    blueBox.style.display = "block";
    // 显示时重置位移值，避免状态错乱
    currentOffset = 0;
    blueBox.style.transform = `translate(${currentOffset}px)`;
}

方案说明 #

• 所有位移判断基于纯数值运算，不会出现字符串对比的逻辑偏差
• 逻辑流程为先计算本次要移动的总距离，再判断是否触发隐藏规则，匹配需求逻辑
• 独立维护状态的方式耦合度极低，后续如果给元素添加旋转、缩放等其他transform效果，也不会影响位移判断的准确性

如果必须从DOM属性读取位移值，不要读取元素的内联style属性，需通过window.getComputedStyle(blueBox).transform获取实际渲染的矩阵值，再从矩阵字符串中提取水平位移做判断，但这种方式解析成本高、容错性差，不属于推荐方案。

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