为什么我的div元素无法通过编写的移动函数实现位置移动？

核心故障点 #

1. 样式读取失败：elem.style 只能读取元素内联style属性中定义的CSS属性，你代码里的top、left是写在CSS样式表中的，elem.style.left会返回空字符串，parseInt转换后得到NaN，数值运算失效导致元素位置无法更新。
2. 键盘事件不触发：body元素默认没有聚焦属性，页面未主动点击的情况下，keydown事件不会冒泡到body上，导致监听回调完全不执行。

修复方案 #

• 把键盘事件从body移到document上，无需考虑聚焦问题，兼容性更好，删除body标签上的onkeydown属性，用JS统一绑定事件更易维护。
• 用window.getComputedStyle()读取元素实际生效的计算样式，确保能拿到CSS样式表中定义的top、left值。
• 对转换后的坐标值做NaN判断，异常情况下给默认初始值，避免运算错误。
• 可选：替换已经被标准废弃的keyCode为e.key，代码可读性更高，直接对应按键字符无需查键码表。

修正后完整代码 #

JS代码 #

var mover; 

function moveDivBlock(e){
    const key = e.key.toLowerCase();
    if (key === 'e' || key === 'd' || key === 'c'){//右移
        moveBlock(mover,10,0);
    }
    if (key === 'q' || key === 'a' || key === 'z'){//左移
        moveBlock(mover,-10,0);
    }
    if (key === 'q' || key === 'w' || key === 'e'){//上移
        moveBlock(mover,0,10);
    }
    if (key === 'z' || key === 'x' || key === 'c'){//下移
        moveBlock(mover,0,-10);
    }
}

function moveBlock(elem, rightShift, upShift){
    // 读取计算后的实际样式值
    const computedStyle = window.getComputedStyle(elem);
    let curLeft = parseInt(computedStyle.left); 
    let curTop = parseInt(computedStyle.top); 
    // 容错处理：值非法时给默认初始值
    curLeft = isNaN(curLeft) ? 130 : curLeft;
    curTop = isNaN(curTop) ? 290 : curTop;
    elem.style.left = (curLeft + rightShift) + "px"; 
    elem.style.top = (curTop - upShift) + "px"; 
}

window.onload=function(){
    mover=document.getElementById("mover");
    // 事件绑定到document，无需body聚焦即可触发
    document.addEventListener('keydown', moveDivBlock);
}

CSS代码（无需修改） #

#mover{
    position:absolute;
    top:290px;
    left:130px;
    background-color:green;
    width:50px; 
    height:50px; 
    border:2px solid black;
}

HTML代码（删除body上的内联事件绑定） #

<body>
    <div id="mover"></div>
</body>

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