[POO] Coordonnées d'un objet

Version imprimable

07/01/2008, 14h03
Melem

[POO] Coordonnées d'un objet
Bonjour. Pourriez-vous m'indiquer la méthode pour connaître la position et les dimensions d'un objet d'une page web. Par exemple, on a quelque part :
Code:

1 2 3 4 5 6 7 <table> <tr> <td id="x"> </td> </tr> </table>
Quelles méthodes ou propriétés de l'objet document.getElementById("x") me permettent de connaître la position (left et top) et les dimensions (width et height) de cet objet. Merci de votre aide.
07/01/2008, 14h18
E.Bzz
Bonjour,
il suffit de récupérer les styles CSS.
Pour la taille, c'est simple :
Code:

1 2 document.getElementById('x').style.width; document.getElementById('x').style.height;
Pour la position, la même syntaxe te donneras la position par rapport au bloc parent
Code:

1 2 document.getElementById('x').style.left; document.getElementById('x').style.top;
Pour avoir le décalage par rapport à la page, c'est offsetTop et offsetLeft au lieu de top et left.

A+
07/01/2008, 14h36
Melem

Merci pour offsetTop et offsetLeft c'est bien ce que je cherchais, parce que top et left justement me renvoyaient toujours 0. Et au fait, comment les convertir facilement en nombre? Jusqu'à présent je fais toujours :

Code:

Number(document.getElementById("x").style.left.slice(0,-2))

Merci beaucoup.
07/01/2008, 14h43
E.Bzz

Citation:

Envoyé par Melem

comment les convertir facilement en nombre?

Code:

parseInt(document.getElementById("x").style.left.slice(0,-2), 10)

Un bug (évoqué dans les contributions) fait qu'il faut préciser la base (10) de conversion (sinon la base risque d'être fausse - hoctale par ex. - suivant le 1° caractère de la chaine à convertir) ....

A+

C'est bête. J'avais tellement confiance à la réponse qu'on m'a donné que je ne l'avais même pas testé au jour le jour et maintenant me revoilà dans le même pétrin. Voici ce que j'ai :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Hello</title> </head> <body> <center> <div id="hello"> <table><tbody><tr><td style="background-color:#000000; color:#FFFFFF; font:18pt Verdana;"> Hello world ! </td></tr></tbody></table> </div> <script type="text/javascript" language="javascript" > alert(document.getElementById("hello").style.left); </script> </center> </body> </html>
J'espérais obtenir à l'affichage la valeur de l'abscisse de la couche hello dans le document mais ça ne m'a rien du tout donné (puisque je ne l'ais pas spécifié). Quant à style.offsetLeft, ce n'est même pas défini (IE6 & Firefox 1.5). document.getElementById("hello").offsetLeft est défini mais vaut toujours 8 quelle que soit la position de la couche. Par contre document.getElementById("hello").offsetTop a l'air de fonctionner !

J'aimerais savoir comment obtenir les coordonnées (x et y) et les dimensions d'un élément du document, sans que je les ai moi-même spécifiées.

Merci.

21/03/2008, 13h47
le_chomeur

ton élément n'étant pas définit en position absolute ET dépendant de ses parents, il te faut faire une addition , sur les offset de tous les parents de ton objet :)
22/03/2008, 16h02
Melem

Oui mais ici le div est dans une balise center qui est dans la balise body donc quel parents ? En effet, si j'ai spécifié la position absolue du div le problème ne se posait pas, mais je veux placer un objet et demander sa position, pas placer un objet en spécifiant sa position.
23/03/2008, 00h40
le_chomeur

il te faut utiliser une fonction récursive , récupérant la position de chaques parents, jusqu'à arriver jusqu'au body
26/03/2008, 10h13
Melem

Citation:

il te faut utiliser une fonction récursive , récupérant la position de chaques parents jusqu'à ...

... et comment on fait :mur: ? Sachant que certaines solutions qu'on m'avait déjà donné (style.offsetLeft ...) ne semblent pas marcher :pleure:.

:help:

voila un exemple complet ;)

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
function findPos(obj) {
	//position x / y de l'objet
    var x = obj.offsetLeft || 0;
    var y = obj.offsetTop || 0;
	//tant qu'il y a un parent, on ajoute la position de son parent
    while (obj = obj.offsetParent) {
        x += obj.offsetLeft
        y += obj.offsetTop
    }
	//Ici on retour x ou y ( ou les deux dans un tableau ou un hash
    return x;
}
</script>
</head>
 
<body>
<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td onclick="alert(findPos(this))">click ici </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td onclick="alert(findPos(this))">et ici </td>
    <td>&nbsp;</td>
  </tr>
</table>
<div id="titi" style="background-color:#CCCCCC;position:absolute;left:500px;top:400px;" onclick="alert(findPos(this))">
	cettte div est positionné en absolute a 500px de gauche et 400px par raport au bord supérieur <br />
	click moi dessus pour vérifier;
</div>
 
<div id="titi" style="background-color:#CCCCCC;position:absolute;left:500px;top:500px;width:200px;" >
	<div style="background-color:#666666;position:absolute;left:150px;top:100px;" onclick="alert(findPos(this))">
	cettte div est positionné en absolute à l'intérieur d'une autre a 150 de gauche et 100en y<br />
	click moi dessus pour vérifier;
	</div>
</div>
</body>
</html>

26/03/2008, 12h04
Melem

Incroyable, ça marche !!! :). Merci beaucoup.