Write OffsetTop avec un div en variable
Bonsoir à tous,
je suis sur un petit projet et je bloque. Je suis débutant en javascript alors ma question va peut-être être stupide pour certain mais pour mois je bloque et cela m'empêche d'avancer ....
en fait j'ai dans un page plusieurs div que je nomme par l'id respectivement id1, id2 etc ... le but étant d'en avoir pleins tout pleins.
J'ai trouvé une petit fonction que me permet de retrouver les valeurs de chaque id et de les afficher en boucle.
Hors moi je souhaiterai en plus d'afficher leur id, je voudrais que pour chaque div s'affiche le Top et le Left par rapport à la page.
Exemple d'affichage du résultat:
Id1 Top= 100px
Left = 500 px
id2 Top=300px
Left= 50 px
etc ....
Hors avec ma "requete" j'obtiens bien les noms des div mais j'obtiens aussi un 0 à la place des valeurs Top et Left.
Voici mon code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<html>
<head>
<script type="text/javascript">
function affichage()
{
var tab_div=document.body.getElementsByTagName('div');
for (i=0;i<7;i++){
document.write("ligne numéro "+tab_div[i].id+"<br />");
document.write(tab_div[i].offsetTop);
document.write("<br />");
document.write(tab_div[i].offsetLeft);
document.write("<br />");
}
}
</script>
</head>
<body>
<div id="id1" name="prout" style="position:absolute;left:100px;top:100px;">ESSAI</div>
<div id="id2" name="qui pue" style="position:absolute;left:200px;top:600px;border-width:1px;border-color:lightblue;border-style:solid;width:250px;background-color:#cccccc;"></div>
<div id="id3" name="prout" style="position:absolute;left:150px;top:100px;">ESSAI3</div>
<div id="id4" name="prout" style="position:absolute;left: 350px;top:340px;">ESSAI4</div>
<div id="id5" name="prout" style="position:absolute;left:400px;top:120px;">ESSAI5</div>
<div id="id5" name="prout" style="position:absolute;left:450px;top:360px;">ESSAI6grhtjykiuj</div>
<input type="button" value="Enregistrer les changements" onclick="affichage();">
</div>
</body>
</html> |
Quelqu'un peut-il m'aider et me dire pourquoi j'obtiens ceci :
ligne numéro id1
0
0
ligne numéro id2
0
0
ligne numéro id3
0
0
ligne numéro id4
0
0
ligne numéro id5
0
0
ligne numéro id5
0
0
Merci pour votre aide, vos conseils et votre indulgence cr je suis débutant mais tout aide, réponse ou orientation sera la bienvenu. Je galère vraiment sur ce petit truc même si je suis persuader que cela n'est pas quelque chose de bien compliqué.
Merci pour votre aide
PAz :P
