如何在JS脚本中调整DOM元素的margin值实现方向键控制按钮移动

DevOps 小满

2026-10-1

问题原因

DOM元素的style属性赋值必须带单位，直接传入数字10浏览器无法识别，需要拼接px单位
代码中使用的=+是错误语法，效果等价于直接赋值为正10，不会累加数值；就算使用+=，直接给原本是字符串格式（带px）的margin值加数字也会触发字符串拼接，得到非法属性值被浏览器忽略
原有margin方向的控制逻辑有误，比如按左箭头加marginRight不会触发按钮左移，方向和属性对应关系不对

正确实现代码

document.body.addEventListener("keydown", function (evt) {
    const btn = document.querySelector('button');
    // 获取当前元素真实生效的margin值，转成数字处理
    const currentMT = parseInt(getComputedStyle(btn).marginTop) || 0;
    const currentML = parseInt(getComputedStyle(btn).marginLeft) || 0;

    switch(evt.code) {
        case 'ArrowUp':
            btn.style.marginTop = `${currentMT - 10}px`;
            break;
        case 'ArrowDown':
            btn.style.marginTop = `${currentMT + 10}px`;
            break;
        case 'ArrowRight':
            btn.style.marginLeft = `${currentML + 10}px`;
            break;
        case 'ArrowLeft':
            btn.style.marginLeft = `${currentML - 10}px`;
            break;
        default:
    }
})