1

我刚刚开始学习 javascript，我正在尝试使用 javascript 移动 div 元素。我使用样式的 left 和 top 属性来移动 div。代码如下。

html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script>
window.onload = function() {

    divObj = document.getElementById('divObj');

    window.onkeydown=function(e) {
        var keycode;
        keycode = e.keyCode;
        speed = 1;
        if(keycode == 37) {        
           divObj.style.left = (parseInt(divObj.style.left) - speed) + "px"; }
        else if(keycode == 38)
           divObj.style.top = (parseInt(divObj.style.top) - speed) + "px";
        else if(keycode == 39)
           divObj.style.left = (parseInt(divObj.style.left) + speed) + "px";  
        else if(keycode == 40)
           divObj.style.top = (parseInt(divObj.style.top) + speed) - "px";    

        }
    }
</script>

<style>
div.div1 { width : 200px;
          height :50px;
          background-color : #333;
          position:absolute;
          left:0px;
          top:0px;
        }
</style>


</head>

<body>
<div id = "divObj" class = "div1"></div>

</body>
</html>

问题是 'divObj.style.left' 没有返回任何值，因此无法使用向上和向下键移动 div。

如果有人知道如何获取 div 的样式左属性的值，请告诉我。

4

3 回答 3

3

您需要为所有 else if 语句使用单独的大括号

if(keycode == 37) {        
           divObj.style.left = (parseInt(divObj.style.left) - speed) + "px"; }
        else if(keycode == 38){
           divObj.style.top = (parseInt(divObj.style.top) - speed) + "px";}
        else if(keycode == 39){
           divObj.style.left = (parseInt(divObj.style.left) + speed) + "px"; } 
        else if(keycode == 40){
           divObj.style.top = (parseInt(divObj.style.top) + speed) - "px";}
于 2013-07-04T10:26:44.137 回答
1

试试这个

window.onload = function () {
divObj = document.getElementById('divObj');

window.onkeydown = function (e) {
   var keycode;
   keycode = e.keyCode;
   speed = 1;
   if (keycode == 37)
      divObj.style.left = 
           ((divObj.style.left == "" ? "0" : parseInt(divObj.style.left)) + speed) + "px";
   else if (keycode == 38)
       divObj.style.top = 
           ((divObj.style.top == "" ? "0" : parseInt(divObj.style.top)) + speed) + "px";
   else if (keycode == 39)
        divObj.style.left = (
           (divObj.style.left == "" ? "0" : parseInt(divObj.style.left)) + speed) + "px";
   else if (keycode == 40)
        divObj.style.top = 
            ((divObj.style.top == "" ? "0" : parseInt(divObj.style.top)) + speed) + "px";
    }
}
于 2013-07-04T10:34:15.367 回答
1

我是这样弄的

divObj = document.getElementById('divObj');

 window.onkeydown=function(e) {
        var keycode;
        var lll = divObj.offsetLeft
        var rrr = divObj.offsetTop
        keycode = e.keyCode;
        speed = 1;
        if(keycode == 37) {        

           divObj.style.left = lll - speed+"px";}

        else if(keycode == 38){
          divObj.style.top = rrr - speed+"px";}
        else if(keycode == 39){
           divObj.style.left = lll + speed+"px";}
        else if(keycode == 40){
          divObj.style.top = rrr + speed+"px";}
 }

jsfiddle

于 2013-07-04T10:47:28.910 回答