如何实现按方向键每次将元素left属性增减10%？

我尝试调整元素的left定位属性（百分比形式），希望按下方向键时元素能够移动。以下是我的代码：

function handleMovement(e) {
  var Char = document.getElementById("Character").style;
  if (event.code == "ArrowLeft") {
    Char.position = "absolute";
    Char.left - "10%";
  } else if (event.code == "ArrowRight") {
    Char.position = "absolute";
    Char.left + "10%"
  }
}

预期效果为：每次按下左箭头键，元素向左移动10%；每次按下右箭头键，元素向右移动10%（例如按左箭头3次，总共左移30%）。但我尝试直接对Char.left加"10%"或+10+"%"的写法都无效，元素无法移动，寻求解决方法。

你的代码存在几个关键问题，导致元素无法移动：

1. 事件对象使用错误：函数参数是e，但你调用了全局event，部分环境下会出现兼容性问题，应该统一使用参数e。
2. 字符串无法直接做加减运算：Char.left返回的是带%的字符串（比如"20%"），直接执行- "10%"这类操作不会得到有效数值，必须先提取数字部分再计算。
3. 未将计算结果赋值回属性：你只执行了运算，但没有把新值重新赋给Char.left，等于没有修改元素的定位。
4. 未处理初始值为空的情况：第一次触发事件时，Char.left可能是空字符串，需要默认设置为0%。

修正后的代码如下：

function handleMovement(e) {
  const charStyle = document.getElementById("Character").style;
  // 确保元素为绝对定位
  charStyle.position = "absolute";
  
  // 提取当前left的数字值，初始为空时默认0
  let currentLeft = parseInt(charStyle.left) || 0;
  
  if (e.code === "ArrowLeft") {
    currentLeft -= 10;
  } else if (e.code === "ArrowRight") {
    currentLeft += 10;
  }
  
  // 将计算结果转为百分比格式，赋值回left属性
  charStyle.left = `${currentLeft}%`;
}

补充说明： #

• 记得给页面绑定键盘事件，否则函数不会触发：

document.addEventListener("keydown", handleMovement);

• 如果需要限制元素移动范围（比如不超出视口），可以在计算后添加判断逻辑，比如currentLeft = Math.max(0, Math.min(90, currentLeft))（限制在0%-90%之间）。

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