Question

我刚刚开始学习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的样式左侧属性的值，请告诉我。

Answer 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";}

Answer 2

试试这个

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";
    }
}

Answer 3

我这样做了

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

无法获取div样式左值....

3 个答案: