Leggere le proprietà di un <div>

clingonboy

Nuovo Utente
19 Feb 2012
2
0
0
46
Vicenza
Inanzitutto complimenti per il forum e ciao a tutti, è il primo post che scrivo e inizio con una domanda probabilmente da principiante.
Stò cercando di imparare javascript e devo dire che mi stà piacendo molto.
Nelle varie prove per imparare ho incontrato un problema che non riesco a risolvere anche se ho cercato a lungo su internet. .... veniamo al dunque ...

Nel codice che segue ha alcuni div che attraverso delle funzioni che ho copiato da un tutorial le rendo trascinabili sulla pagina, e fin qui tutto ok. Io voglio andare a leggere il valore della proprietà 'style.left' e poi mostrarlo con un alert che lancio con un botton.

La mia domanda è questa: perchè dopo il caricamento della pagina se provo a visualizzare il valore non viene mostrato come se non fosse definito mentre se provo dopo che ho spostato nella pagine il div trascinabile il valore viene visualizzato?

Ho ipotizzato che sia perchè all'inizio l'elemento div si posiziona nella pagina in conseguenza a come il brawser interpreta il codice html, mentre poi quando lo sposto il valore è definito dalla funzione javascript e quindi è dichiarato e leggibile. Ma ci sarà pur un modo per leggere il valore iniziale, di dove l'elemento è posizionato?

Codice:
<html>
<head>
<style type="text/css"> .dragme{position:relative;cursor: pointer; cursor:hand


}</style>

<script type="text/javascript">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e){
if (isdrag){
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse(e){
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme"){
fobj = nn6 ? fobj.parentNode : fobj.parentElement; }
if (fobj.className=="dragme"){
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

function mostraPosizione(){
var datiDx = document.getElementById('sx');
alert(datiDx.style.left);
}

</script>

<body>

<div class="dragme"> <h1> Testo 1 </h1> </div> 

<div id="sx" class="dragme" style="width:200px;position:relative;display:inline;border:1px solid red;" >
lkjklò jlkj
</div>
<div id="dx" class="dragme" style="width:200px;position:relative;display:inline;border:1px solid green;">
lkjklò jlkj
</div>

<p> Pulsante </p>
<button type="button" onclick="mostraPosizione()">Mostra Posizione</button>

</body>
</html>

l'elemento in questio è il div col bordo rosso id='sx'

spero di essere stato chiaro e di non annoiarvi troppo con domande stupide.
Grazie in anticipo per la pazienza
 
Aggiungere una funzione iniziale

attenzione al valore 0 a javascript gli procura intossicazione.

ecco l'esempio (spostando sempre il primo div con contorno rosso)
http://max400.netne.net/drag.html

Codice:
function inizio(){
fff=document.getElementById('sx').style.marginLeft=1;
}

poi ho tolto il suffisso "px" che non lo posso vedere... ho usato lo split

Codice:
function mostraPosizione(){
hhh=document.getElementById('sx').style.marginLeft;
sss_=hhh.split('px');
sss=eval('sss_[0]');

var datiDx = document.getElementById('sx');
alert(datiDx.style.left+sss);
}

Comunque in passato avevo fatto un altro script per lo spostamento dei div
basta cercarlo... in questa sezione.

dimenticavo nel body viene lanciata la funzione inizio()
Codice:
<body onload="inizio()">
 
Ultima modifica:
Ciao,

il tuo esempio va bene, eccetto per il fatto che non può al caricamento della pagina, la prima volta mostrarti la distanza del div dal margine sinistro, visto che non hai dichiarato una posizione left: e top: nello style,

quindi mostra un campo vuoto nell'alert.

La posizione attuale del div rosso è di 8px dal margine sinistro questo puoi calcolarlo con offsetLeft (adesso è di 8px) sapere la distanza dal body al limite sinistro del div, offsetTop (adesso è 79px) per sapere la distanza dal body al limite alto del div.

position:relative non ti calcola il width: e height: ma si limita a mostrarti solo lo spazio necessario per i caratteri inseriti.

Quindi in riferimento al tuo esempio anche aggiungendo top e left allo style usando position:relative rimarrà sempre al suo posto esattamente dove è stato inserito nella pagina. Deve essere posizionato con position:absolute per tutti i div

Esempio:

Codice:
<html>
<head>
<style type="text/css"> .dragme{position:relative;cursor: pointer; cursor:hand}
</style>

<script type="text/javascript">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e){
if (isdrag){
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function selectmouse(e){
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme"){
fobj = nn6 ? fobj.parentNode : fobj.parentElement; }
if (fobj.className=="dragme"){
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

function mostraPosizione(){
var datiDx = document.getElementById('sx');
alert("Div Rosso: Left:"+datiDx.style.left+" Top: "+datiDx.style.top)
}
</script>
</head>
<body>

<div id="sx" class="dragme" style="left:20px;top:20px;width:200px;position:absolute;display:inline;border:1px solid red;">Testo 1</div>

<div id="dx" class="dragme" style="left:220px;top:20px;width:200px;position:absolute;display:inline;border:1px solid green;">Testo 2</div>

<div id="dxx" class="dragme" style="left:20px;top:50px;width:200px;position:absolute;display:inline;">
<h1> Testo 1</h1></div>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<p> Pulsante </p>

<button type="button" onclick="mostraPosizione()">Mostra Posizione</button>

</body>
</html>

L'esempio fatto da Max, va bene, ma ha impostato un valore iniziale per la posizione del div che non è quella reale, impostandola a 1 invece di prendere le coordinate impostate in left: e top: nel div.

function inizio(){
fff=document.getElementById('sx').style.marginLeft=1;
}

Se prima di premere il pulsante fai click sul div Rosso si sposta di un Px verso sinistra e to mostra nuovamente un alert vuoto:

dovuto da:

hhh=document.getElementById('sx').style.marginLeft='';


Valeria.
 

Discussioni simili