时间戳

首页 > 解决方案 > 为什么我的 div 元素没有根据我的移动功能移动？

javascript - 为什么我的 div 元素没有根据我的移动功能移动？

问题描述

我试图通过让主体感知我按下的键按钮，找到正确的键符号 w、a、x、d，然后从 html 元素的 css 属性中减去或添加来移动我的 div 元素。

但是它不起作用，每当我控制台记录元素或其属性时，什么都不会出现。搬运工不会动。

var mover; 


function moveDivBlock(e){
    if ((e.keyCode == 69) ||(e.keyCode == 68)||(e.keyCode == 67)){//go right
        moveBlock(mover,10,0);}
    if ((e.keyCode == 81) ||(e.keyCode == 65)||(e.keyCode == 90)){//go left
        moveBlock(mover,-10,0);}
    if ((e.keyCode == 81) ||(e.keyCode == 87)||(e.keyCode == 69)){//go up
        moveBlock(mover,0,10);}
    if ((e.keyCode == 90) ||(e.keyCode == 88)||(e.keyCode == 67)){//go down
        moveBlock(mover,0,-10);}
}

function handleKeyDown(e) {
    moveDivBlock(e);
}


function moveBlock(elem, rightShift, upShift){
    var curLeft = parseInt(elem.style.left); 
    var curTop = parseInt(elem.style.top); 
    elem.style.left = (curLeft + rightShift) + "px"; 
    elem.style.top = (curTop - upShift) + "px"; 
}


window.onload=function(){
    mover=document.getElementById("mover");
}
    #mover{
        position:absolute;
        top:290px;
        left:130px;
    
        background-color:green;
        width:50px; 
        height:50px; 
        border:2px solid black;
    }
<body onkeydown="handleKeyDown(event);">
        <div id="mover"></div>
</body>

标签： javascript

解决方案

这不起作用的原因，elem.style.top仅返回内联样式，而不是来自 css 文件的样式。要从 css 文件中获取样式，您需要使用getComputedStyle(elem). 请试试这个


function moveBlock(elem, rightShift, upShift){
    var curLeft = parseInt(getComputedStyle(elem).left); 
    var curTop = parseInt(getComputedStyle(elem).top); 
    elem.style.left = (curLeft + rightShift) + "px"; 
    elem.style.top = (curTop - upShift) + "px"; 
}

推荐阅读