Controllare CSS con JavaScript

[skjobax]

Ciao io ho un elemento

<div id="div">
</div> 

, che, dovrei spostare a sinistra, sopra, a destra e in basso a seconda del tasto premuto utilizzando document.onkeydown = keyDown(e); con questo:

document.onkeydown=keyDown;
function __() {
    try{document.getElementById("div").innerHTML="Press an arrow.";}
    catch(E){alert(E);}
}
function keyDown(e){
    var cch = e.keyCode;
    switch(cch){
        default:
            try{document.getElementById("div").innerHTML="\""+String.fromCharCode(cch)+"\" isn't an arrow.";}
            catch(E){alert(E);};
            return false;
        break;
        case 37:
            //alert('Left');
            try{document.getElementById("div").innerHTML="\u2190";}
            catch(E){alert(E);}
        break;
        case 38:
            //alert('Up');
            try{document.getElementById("div").innerHTML="\u2191";}
            catch(E){alert(E);}
        break;
        case 39:
            //alert('Right');
            try{document.getElementById("div").innerHTML="\u2192";}
            catch(E){alert(E);}
        break;
        case 40:
            //alert('Down');
            try{document.getElementById("div").innerHTML="\u2193";}
            catch(E){alert(E);}
        break;
    }
} 

Sapendo che e.keyCode (vettore) mi restituisce un numero, come faccio a modificare la position dell'oggetto div?

Ho provato con document.getElementById("div").style.position.left =document.getElementById("div").style.position.lef t+1+"px"; ma non mi fa.

[artorius]

perché document.getElementById("div").style.position.left non ritorna un numero, ma una stringa composta da numero + unità (es "125px"), devi fare:

document.getElementById("div").style.position.left = (parseInt(document.getElementById("div").style.position.left)+1)+"px";

[skjobax]

Ho appena provato con una try - catch e mi dà il seguente errore:

Illegal use of parseInt on line 26

[artorius]

scusa, non avevo letto non è style.position.left, ma style.left.

la proprietà style contiene tutte le regole applicate sull'elemento tramite l'attributo style:

<div id="Test" style="width: 123px; height: 55px; margin-left: 120px; background-color: #C0C0C0;"></div>

Facendo:

alert(document.getElementById("Test").style.width); //Alert 123px
alert(document.getElementById("Test").style.height); //Alert 55px
alert(document.getElementById("Test").style.marginLeft); //Alert 120px
alert(document.getElementById("Test").style.backgroundColor); //Alert rgb(192, 192, 192) beh, dipende anche dal browser

N.B: non ho usato margin-left, ma marginLeft perché è il nome della proprietà CSS in Javascript.

http://codepunk.hardwar.org.uk/css2js.htm

[skjobax]

Il link per le proprietà css in javascript mi è tornato molto utile e ora funziona perfettamente!!

Grazie, artorius!