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 の style left プロパティの値を取得する方法を知っている人がいたら教えてください。

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 に答える