[POO] Coordonnées d'un objet

**Melem** · 07/01/2008, 14h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**E.Bzz** · 07/01/2008, 14h18

Bonjour,
il suffit de récupérer les styles CSS.
Pour la taille, c'est simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Melem** · 07/01/2008, 14h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci beaucoup.

**E.Bzz** · 07/01/2008, 14h43

Envoyé par Melem

comment les convertir facilement en nombre?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Melem** · 21/03/2008, 12h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**le_chomeur** · 21/03/2008, 13h47

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

**Melem** · 22/03/2008, 16h02

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.

**le_chomeur** · 23/03/2008, 00h40

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

**Melem** · 26/03/2008, 10h13

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

... et comment on fait

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

.

**le_chomeur** · 26/03/2008, 10h56

voila un exemple complet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Melem** · 26/03/2008, 12h04

Incroyable, ça marche !!!

. Merci beaucoup.

[POO] Coordonnées d'un objet

JavaScript

Discussions similaires

Partager

Partager