JS中使用上下左右键盘控制元素移动

想要使用js实现操作上下左右键盘控制页面中元素移动,需要解决的问题有, 如何获取按键触发信息如何使用已触发的按键信息移动元素 元素和样式 #car{    

想要使用js实现操作上下左右键盘控制页面中元素移动,需要解决的问题有,

  • 如何获取按键触发信息
  • 如何使用已触发的按键信息移动元素

元素和样式


    

    

使用绝对定位将小汽车的位置布局在页面中间差不多的地方

js代码

    

获取按键按下事件

document.onkeydown = function(event){

            console.log(event.keyCode);

}

获取到上下左右分别为38,40,37,39

修改属性时,由于dom.style只能获取行内样式,所以对于

console.log(car.style.left);

这样的式子得到的为空字符串empty string

若是写在行内样式则获得"500px"字符串

而使用dom.offset获得的为数值,直接修改后加上字符串"px"再赋值给dom.style即可