如何通过style属性实现按下右键时为div增加10px左侧定位值？

嘿，我看到你想实现按下右箭头键时让div的left值增加10px，你的思路没问题，但代码里有个小细节导致它没法正常工作——咱们来一步步修正它：

原代码的核心问题 #

当你直接取document.getElementById("test").style.left时，得到的是带单位的字符串（比如初始的"0px"），直接拼接"10px"会变成"0px10px"，这显然不是有效的CSS定位值，浏览器根本识别不了。

修正后的完整实现 #

先看可以正常运行的完整代码，后面我会解释关键改动：

HTML

<div id="test"></div>

CSS

#test {
  position: relative;
  left: 0px;
  width: 25px;
  height: 80px;
  background-color: black;
}

JavaScript

// 提前缓存DOM元素，避免重复查询，提升性能
const testDiv = document.getElementById("test");

document.onkeydown = function(k) {
  const RightBtn = 39; // 右箭头键的keyCode
  if (k.keyCode === RightBtn) {
    // 提取当前left的纯数值，parseInt会自动忽略"px"单位
    let currentLeft = parseInt(testDiv.style.left) || 0;
    // 计算新值并拼接单位，设置回元素样式
    testDiv.style.left = `${currentLeft + 10}px`;
  }
};

关键改动说明 #

• 缓存DOM元素：把testDiv提前获取并保存，不用每次按键都重复查询DOM，这是前端开发里的常用优化小技巧。
• 处理数值与单位：用parseInt()把带单位的字符串转换成纯数字，如果style.left为空（比如初始值是通过外部CSS而非行内样式设置的情况），就默认使用0作为初始值。
• 模板字符串拼接：用${}语法简洁地把计算后的数值和"px"拼接成有效的CSS值。

额外优化：用更现代的按键判断方式 #

keyCode已经被标准废弃了，现在更推荐用k.key来判断按键，代码可读性更高，兼容性也更好：

document.onkeydown = function(k) {
  if (k.key === "ArrowRight") {
    let currentLeft = parseInt(testDiv.style.left) || 0;
    testDiv.style.left = `${currentLeft + 10}px`;
  }
};

这样修改后，按下右箭头键，黑色的div就会顺利向右移动啦！

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