Table des matières
Niveau
..........
En rapport...

Position réelle d'un objet

Il n'existe pas beaucoup de méthode pour connaître la position d'un objet sur la page.
En javascript on dispose de 4 propriétés :

Comme les coordonnées sont trouvées par rapport à l'élément parent, pour connaître la position d'un objet sur la page, il faut ajouter ses coordonnées plus celle de ses parents, direct et indirect.

Exemple

html4strict
<html>
...
    <body>
        <div id="a">
            <div id="b">
                <div id="c">
 
                </div>
            </div>
        </div>
    </body>
</html>

Dans le cas ci-dessus, pour connaître la position gauche réelle du div “c”, il faut connaître l'offsetLeft du div “c”, du div “b” et du div “a” puis ajouter les 3.

Fonction

Le code ci-dessous, va simplifier la tâche en calculant les positions de façon récursive en partant d'un objet donné.
Ainsi, pour calculer la position gauche du div “c” de l'exemple, il suffit d'écrire :

javascript
GetDomOffset( document.getElementById('c'), 'offsetLeft' );

Code

javascript
/*
Récupère la position réelle d'un objet dans la page (en tenant compte de tous ses parents)
IN 	: Obj => Javascript Object ; Prop => Offset voulu (offsetTop,offsetLeft,offsetBottom,offsetRight)
OUT	: Numérique => position réelle d'un objet sur la page.
*/
function GetDomOffset( Obj, Prop ) {
	var iVal = 0;
	while (Obj && Obj.tagName != 'BODY') {
		eval('iVal += Obj.' + Prop + ';');
		Obj = Obj.offsetParent;
	}
	return iVal;
}


27/10/2006 10:58 -

iDo –