如何用JavaScript实现按钮每次点击左移100px？解决仅移动一次问题

问题根源 #

你的代码中item.style.left += '100px'存在字符串拼接的逻辑问题：

• 初始状态下item.style.left为空（或undefined），第一次拼接后得到合法值100px，浏览器能识别并移动元素；
• 第二次点击时，会把100px和100px拼接成100px100px，这不是合法的CSS长度值，浏览器无法解析，因此元素不再移动。

修复方案1：提取数值后累加 #

通过parseInt提取当前left的纯数值，累加后重新拼接单位，确保每次生成合法的CSS值：

const item = document.querySelector(".item")
let moveItem = () => {
   item.style.position = 'absolute'
   // 提取当前left数值，初始值默认为0
   const currentLeft = parseInt(item.style.left) || 0
   item.style.left = `${currentLeft + 100}px`
}

item.addEventListener("click", moveItem)

修复方案2：使用CSS变量管理位置 #

用CSS变量存储偏移量，通过JS修改变量值，让CSS自动计算位置，逻辑更清晰易维护：

1. 先给元素添加CSS变量：

.item {
  position: absolute;
  --left-offset: 0;
  left: calc(var(--left-offset) * 1px);
}

2. 对应的JS代码：

const item = document.querySelector(".item")
let moveItem = () => {
   const currentOffset = parseInt(getComputedStyle(item).getPropertyValue('--left-offset'))
   item.style.setProperty('--left-offset', currentOffset + 100)
}

item.addEventListener("click", moveItem)

额外提示 #

原代码中item未用const/let声明，会成为全局变量，建议添加const避免污染全局作用域。

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