Javascript 在键控键上更改元素的边距_Javascript_Html_Css

Javascript 在键控键上更改元素的边距

javascript html css

Javascript 在键控键上更改元素的边距,javascript,html,css,Javascript,Html,Css,我曾尝试在检测到按键事件时更改元素的边距，但我遇到了一个小问题，因为它不会立即执行代码。我试图在按下左箭头时减小边距，在按下右箭头时增大边距代码如下： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <met

我曾尝试在检测到按键事件时更改元素的边距，但我遇到了一个小问题，因为它不会立即执行代码。我试图在按下左箭头时减小边距，在按下右箭头时增大边距

代码如下：

<!DOCTYPE html>

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset="utf-8" />
        <title>Game</title>
        <style>
            body{
                background: #f00;
            }
            hr{
                width: 1px;
                height: 600px;
            }
            .player{
                text-align: center;
                width: 200px;
                height: 20px;
                background: #0005ff;
                margin: 600px 550px 0px;
            }
        </style>
        <script>
            var player = document.getElementById('player')
            var num = 550
            $(document).keydown(function (event) {
                switch (event.keyCode) {
                    // Left Arrow
                    case 37: num++;
                             document.getElementById('player').style.margin = '600px ' + num + 'px' + ' 0px';
                             break;
                    // Right Arrow
                    case 39: num--;
                             document.getElementById('player').style.margin = '600px ' + num + 'px 0px';
                             break;
                }
            });
        </script>
    </head>
    <body>
        <div class="player">
            Player
        </div>
    </body>
</html>


游戏
身体{
背景：#f00；
}
人力资源{
宽度：1px；
高度：600px；
}
.玩家{
文本对齐：居中；
宽度：200px；
高度：20px；
背景：#0005ff；
利润率：600px 550px 0px；
}
var player=document.getElementById（'player'））
var num=550
$（文档）.keydown（函数（事件）{
开关（event.keyCode）{
//左箭头
案例37:num++；
document.getElementById（'player'）.style.margin='600px'+num+'px'+0px'；
打破
//右箭头
案例39:num--；
document.getElementById（'player'）.style.margin='600px'+num+'px 0px'；
打破
}
});
玩家

我的问题是，当我点击左箭头时，他向左移动，和另一个一样，我如何修复代码使其正常工作

谢谢

编辑：

我得到了答案，现在我唯一的问题是如何让它运行得更快

<div class="player">
    Player
</div>


玩家

到


玩家

它不起作用的原因是，当元素有一个类时，您正在调用

document.getElementById（id）

。

太丢脸了-，太明显了。。我只是不知道而已。非常感谢。我不知道你是怎么做的。好吧，我只是想找一个外人回答我，谢谢你的回答。@yotam在一张便条上，在你的switch语句中，你可以替换

document.getElementById（'player'）.style.margin

player.style.margin或

$（player.css（'margin'，marginhere）

因为您使用的是jQuery。是的，我知道我只是想知道这是否是问题所在，因为它一开始对我不起作用。。所以我只是用getElementId而不是player变量重写了代码。

<div id="player">
    Player
</div>