键盘事件-JZTXT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title><style>
    #div1 {
        width: 200px;
        height: 200px;
        background: lightgreen;
        position: absolute
    }
</style>
</head>
<body>
<div id="div1"> </div>
</body>
</html>
 <script>
     const div1 =document.getElementById("div1")

     onkeydown =function (event){

         if (event.keyCode==37){
             console.log('左',div1.offsetLeft)
             div1.style.left=div1.offsetLeft-10+'px'
             return
         }
         if (event.keyCode==37){
             console.log('右',div1.offsetLeft)
             div1.style.left=div1.offsetLeft+10+'px'
             return
         }         if (event.keyCode==37){
             console.log('上',div1.offsetTop)
             div1.style.top=div1.offsetTop-10+'px'
             return
         }         if (event.keyCode==37){
             console.log('下',div1.offsetTop)
             div1.style.top=div1.offsetTop+10+'px'
             return
         }

     }

 </script>