<style>
#oggetto{
position:absolute;
width:100px;
height:100px;
background-color:red;
}
</style>
<script>
function init(){
var elemento=document.createElement("div");
elemento.setAttribute("id","oggetto");
elemento.setAttribute("style","left:200px");
document.body.appendChild(elemento);
}
</script>
<body onload="init()">
</body>
Ecco.Gli attributi di stile spaziali sono resi come formato stringa.
Devo dare un valore numerico e convertirlo.
Proviamo...
Ecco:
function CreaDiv(left){
var elemento=document.createElement("div");
elemento.setAttribute("class","oggetto");
elemento.setAttribute("style","left:"+left.toString()+"px");
document.body.appendChild(elemento);
}
function init(){
CreaDiv(100);
}
Andiamo con le due coordinate.
function CreaDiv(left,top){
var elemento=document.createElement("div");
elemento.setAttribute("class","oggetto");
elemento.setAttribute("style","left:"+left.toString()+"px;top:"+top.toString()+"px;");
document.body.appendChild(elemento);
}
function init(){
CreaDiv(500,200);
}
Perfetto!!!Ora costruiamo una funzione...
function CreaDiv(left,top){
var elemento=document.createElement("div");
elemento.setAttribute("class","oggetto");
elemento.setAttribute("style","left:"+left.toString()+"px;top:"+top.toString()+"px;");
document.body.appendChild(elemento);
}
function init(){
for(var i=100;i<500;i++){
CreaDiv(i,i);
}
}
Ed ecco una retta con angolo di 45 gradi, ossia con tangente 1, dato che x e y sono uguali.Rendiamo puntiforme il DIV...
<style>
.oggetto{
position:absolute;
width:1px;
height:1px;
background-color:red;
}
</style>
E il gioco è fatto! Ecco una retta a 45 gradi!
E via con la grafica di DIV!!!
Nessun commento:
Posta un commento