JavaScriptでdiv/moving divを左右に再配置

Question

私はjavascriptを初めて使用しています。私は非常に単純なプロジェクトを開始しようとしています。これは、制御可能なdivを表示することです。キーボードのdキーを押します。私は現在、どの属性を変更するのかわからないので、divをどのように移動するかに関する問題を抱えています。

divBar = null; 

function detectKey() { 
    //97 = a 
    //115 = s 
    //100 = d 
    //119 = w 

    if (event.charCode == 97) { 
     //a 
     alert(divBar.position); 
    } 
    if (event.charCode == 115) { 
     //s 
    } 
    if (event.charCode == 100) { 
     //d 
    } 
    if (event.charCode == 119) { 
     //w 
    } 
} 

function createDiv() { 
    divBar = document.createElement("div"); 
    divBar.id = "divBar"; 
    divBar.style.border = "solid 1px #AAAAAA"; 
    divBar.style.backgroundColor = "black"; 
    divBar.style.top = 400; 
    divBar.style.height = "10px"; 
    divBar.style.width = "100px"; 
    divBar.style.position = "absolute"; 
    document.body.appendChild(divBar); 
    document.addEventListener("keypress", detectKey, false); 

} 

私はその条件文を入れることはできません。 divが左、右、上下に移動するようにします。

Answer 1

絶対に配置されていると思われる場合は、divbar.style.topとdivbar.style.leftを変更して移動します。

実例はhttp://jsfiddle.net/jfriend00/rRbZz/です。

Answer 2

これは絶対配置されているため、上部/左のスタイル属性を変更したいと思う可能性が最も高いです。現在の上/左属性を読み込み、a、w、s、dキーが押された後にそれらを加算/減算し、その値を元に戻します。したがって、各キー/方向について、要素にどのような影響があるかを把握しなければなりません。それを上/下（上の属性に影響する）または左/右（左の属性に影響を与える）に動かすでしょうか。そこにあるものを読み、適切な計算を行い、属性を更新する。最も面倒な部分は、初期のstyle.top/style.left属性を読み込んでいますが、Javascriptで設定しているので、問題はないはずです。