JS中使用上下左右键盘控制元素移动_js实现键盘上下左右控制页面选中a标签按下键不按顺序直接按照方向切换选中-CSDN博客

本文介绍如何使用JavaScript监听键盘事件，实现页面元素的上下左右移动。通过获取按键信息，利用DOM操作更新元素位置，实现流畅的用户体验。

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

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

元素和样式

    <style>

        #car{

            width: 64px;

            height: 51px;

            background-image: url(https://blog.csdn.net/'%E9%80%89%E4%B8%8A%E6%88%91%E6%9C%80%E7%88%B1%E7%9A%84%E5%B0%8F%E6%B1%BD%E8%BD%A6！');

            background-size: cover;

            position: absolute;

            left: 500px;

            top: 300px;

        }

    </style>

<body>

    <div id="car" ></div>

</body>

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

js代码

    <script>

        window.onload = function(){

            var car = document.getElementById('car');

            document.onkeydown = function(event){

                console.log(event.keyCode);

                switch(event.keyCode){

                    case 37:car.style.left = car.offsetLeft-10+'px';break;

                    case 38:car.style.top = car.offsetTop-10+'px';break;

                    case 39:car.style.left = car.offsetLeft+10+'px';break;

                    case 40:car.style.top = car.offsetTop+10+'px';break;

                }

            }

        }

    </script>

获取按键按下事件

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即可