Leggere le proprietà di un <div>

clingonboy

Nuovo Utente
19 Feb 2012
2
0
0
43
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
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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:

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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
Autore Titolo Forum Risposte Data
R leggere le proprietà di una img PHP 2
D PHP leggere cartella di Windows PHP 2
G leggere file txt e stampare con php il contenuto a video PHP 7
S Leggere dati da API e visualizzarli PHP 0
elpirata Query per leggere dati da una tabella mysql e mostrarli a video in base a parametri passati tramite GET PHP 5
maxbossi Attenzione alle TRUFFE: Leggere attentamente!!! Annunci servizi di Social Media Marketing 0
J Leggere JSON da Instagram __a=1 PHP 0
L leggere RGB di un pixel dello schermo in java Java 1
felino Script PHP per leggere un file JSON. autenticazione? PHP 4
Q Leggere NFC da web app - web nfc Javascript 0
G Pec come leggere il contenuto Posta Elettronica 1
D [ASP] Leggere Campo decimal MYSQL Classic ASP 1
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
P PHP - Leggere una pagina passata con Form e Captcha PHP 0
Drago73 [Java] leggere/scrivere txt server Java 0
C Leggere dati File.XMLcon PHP XML 11
IT9-Gpp [RISOLTO] Leggere variabile restituita da success Ajax 3
M Leggere il contenuto di una cartella e memorizzare il nome file in mysql PHP 1
I [Javascript] Leggere "var" da file .js esterno (per google map) Javascript 6
W [PHP] Leggere un array un po complicato PHP 3
K Script PHP per leggere array.txt Presentati al Forum 3
H Interpretare e leggere il file log di sfc/scannow. Windows e Software 0
P leggere file .csv con javascript/jquery Javascript 11
V Leggere da db e metodi asincroni:vorrei capire jQuery 8
Monital Leggere un file php contenente dati json PHP 10
napuleone Leggere la scelta radio Javascript 0
Trapano Leggere un file .txt dal fondo PHP 7
Francesco Polese Leggere linea da un file ed eliminarla PHP 2
K leggere codice ean con fotocamera PHP 0
maxbossi Regolamento Regolamento della sezione - leggere ATTENTAMENTE prima di postare IP Cam e Videosorveglianza 0
P leggere dvd e memorizzazione dei dati letti PHP 1
L xmlrpc leggere le risposte. qualcuno mi aiuta? PHP 1
F Leggere file contenuti in cartella e modificarne il nome PHP 3
M Leggere dati da file excel in base al nome del foglio di lavoro PHP 0
felino [Ajax] Leggere in contenuto da un URL esterno Ajax 2
napuleone type="file" leggere con js Javascript 3
A leggere la data del client PHP 1
D batch leggere ultima riga e salvarla Programmazione 0
C Leggere variabili esterne ad una classe in php 5.2 PHP 6
P Leggere XML PHP 4
M Leggere file di grandi dimensioni Java 2
D leggere il contenuto di un file di testo in un file .JS Javascript 11
M Leggere hard-disk linux su Windows Windows e Software 1
L file. leggere dall'ultima riga alla prima PHP 1
Z [VB.NET] Leggere pagina HTML ed estrarre dati da tabella .NET Framework 1
L [c++] Problema leggere file txt riga per riga C/C++ 0
Trapano [risolto] Leggere da un file txt in ordine inverso PHP 2
K Leggere contenuto di una cartella quando viene aperto il file PHP 6
F leggere file xls Classic ASP 0
L Leggere contenuto di una cartella e relative sottocartelle PHP 7

Discussioni simili