Comment retrouver les coordonnées X et Y d'un objet ?

Présentation
La fonction calculeOffsetLeft retourne le nombre de pixel à la gauche de l’élément (son abscisse), la fonction calculeOffsetTop le nombre au dessus (son ordonnée).
Téléchargement
Compatibilité
Linux Mac Windows
0  0 
Téléchargé 53 fois Voir les 7 commentaires
Détails
Catégories : Trucs et astuces
Avatar de denisC
Expert éminent
Voir tous les téléchargements de l'auteur
Licence : Autre
Date de mise en ligne : 4 octobre 2011




Avatar de patricktoulon patricktoulon - Membre extrêmement actif https://www.developpez.com
le 03/03/2018 à 19:06
Bonjour
je n'ai pas testé mais je l'ai un peu transformé ta petite routine
je part du principe que moins le moulin tourne mieux c'est
sous cette forme la elle devrait de donner l'equivalent de getboundingclientrect en un seul tour

Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function calcule() { 
 var position = calculeOffset(r); 
 console.log(position.Left); 
 console.log(position.Top); 
} 
function calculeOffset(element) { 
 var oLeft = 0; 
 var oTop = 0; 
 while (element) { 
  oLeft += element.offsetLeft; 
  oTop += element.offsetTop; 
                  element = element.offsetParent; 
 } 
 return { 
  "left": oLeft, 
  "Top": oTop, 
         "Right": oLeft+=element.offsetWidth, 
                "Bottom": oTop+=element.offsetHeight 
             }; 
}
a tester bien sur
Avatar de NoSmoking NoSmoking - Modérateur https://www.developpez.com
le 05/03/2018 à 13:59
Bonjour Patrick !!!!
je part du principe que moins le moulin tourne mieux c'est

Encore faut-il qu'il tourne !

a tester bien sur

quand on propose une source il est quand même important de l'avoir testée avant.

Qu'aurais tu vu ?, ... que rien ne fonctionne

• Ta fonction calcule() :
Code : Sélectionner tout
1
2
3
4
5
function calcule() { 
 var position = calculeOffset(r); 
 console.log(position.Left); 
 console.log(position.Top); 
}
tu passes en paramètre r à ta fonction calculeOffset alors que cette variable n'est définie nulle part.

• Ta fonction calculeOffset(element) :
Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function calculeOffset(element) { 
 var oLeft = 0; 
 var oTop = 0; 
 while (element) { 
  oLeft += element.offsetLeft; 
  oTop += element.offsetTop; 
  element = element.offsetParent; 
 } 
 return { 
    "left": oLeft, 
    "Top": oTop, 
    "Right": oLeft += element.offsetWidth, 
    "Bottom": oTop += element.offsetHeight 
  }; 
}
que vaut ta variable element à la fin de ta boucle while ... null, donc quand tu écris plus bas element.offsetWidth cela plantera .

elle devrait de donner l'equivalent de getboundingclientrect en un seul tour

Dans ce cas pourquoi ne pas utiliser directement getBoundingClientRect(), pense à respecter la casse, la source de denisC permet de récupérer la position par rapport au document et non par rapport au premier parent positionné.
Avatar de patricktoulon patricktoulon - Membre extrêmement actif https://www.developpez.com
le 05/03/2018 à 15:27
re Bonjour Nosmoking
oui c'est vrai chez moi rest une variable globale representant un div

sinon
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function calcule() { 
 var r = document.getElementById("toto"); 
 var position = calculeOffset(r); 
 console.log(position.Left); 
 console.log(position.Top); 
} 
//pour la fonction 
function calculeOffset(element) { 
        var memo = element; 
        var oLeft = 0; 
        var oTop = 0; 
        while (element) { 
                oLeft += element.offsetLeft; 
                oTop += element.offsetTop; 
                element = element.offsetParent; 
        } 
        return { 
                "left": oLeft, 
                "Top": oTop, 
                "Right": oLeft += memo.offsetWidth, 
                "Bottom": oTop += memo.offsetHeight 
        }; 
}
la fonction de denisC remonte aussi jusqu'au document non ??, tant que element existe(element qui devient le parent a chaque tour de boucle )

de meme que getboundingClientRect non?
j'ai ajouté le top/bottom mais le but etait d'avoir le top/left en un seul coup et du coup maintenant on a les 4 valeurs

on est bon comme ca ?
Avatar de NoSmoking NoSmoking - Modérateur https://www.developpez.com
le 05/03/2018 à 17:02
oui c'est vrai chez moi rest une variable globale representant un div
les variables globales sont à fuir lorsque l'on veut avoir une fonction facilement exportable.

... de meme que getboundingClientRect non?
par rapport au document et par rapport au viewport ce n'est pas la même chose, fait un essai en scrollant la page et observe ce qui se passe au niveau des valeurs.

on est bon comme ca ?
Code : Sélectionner tout
1
2
3
4
5
6
return {
  "left": oLeft,
  "Top": oTop,
  "Right": oLeft += memo.offsetWidth,
  "Bottom": oTop += memo.offsetHeight
}
essaie de respecter les conventions de nommage, le camelCase, ce qui devrait donner
Code : Sélectionner tout
1
2
3
4
5
6
return {
  "left": oLeft,
  "top": oTop,
  "right": oLeft + memo.offsetWidth,
  "bottom": oTop + memo.offsetHeight
}
Je ne vois pas trop ce que peut apporter ta « fonction » !
Avatar de patricktoulon patricktoulon - Membre extrêmement actif https://www.developpez.com
le 05/03/2018 à 18:53
Ok NosMoking
while ofssetparent...= position par rapport au document
getBoundingClientRect() = position par rapport a la window
j'ai testé
disons la fonction de denisC modifié comme je l'ai fait donne une sorte de getBoundingDocumentRect()
j'ai testé bien sur
du coup j'en ai profité pour bien faire la différence aussi entre event.clientx et event.pageX
merci
Avatar de NoSmoking NoSmoking - Modérateur https://www.developpez.com
le 06/03/2018 à 10:55
Certes mais on s'éloigne de la proposition initiale qui est, et reste retrouver les coordonnées X et Y d'un objet.

On peut faire quand même plus simple, au résultat de getboundingClientRect il suffit d'ajouter les valeurs de scroll du document et tu auras ta fonction
Avatar de patricktoulon patricktoulon - Membre extrêmement actif https://www.developpez.com
le 07/03/2018 à 11:06
Bonjour Nosmoking
oui plus simple certainement ca me permet d'aprendre ce que retourne les fonctions
notament le fait d'utiliser e.pagex au lieu de e.clientx+scroll....
des petites chose comme ca qui peuvent simplifié la vie
je vais la faire cette fonction getboudingdocumentrect() avec clientrect
Developpez.com décline toute responsabilité quant à l'utilisation des différents éléments téléchargés.
Contacter le responsable de la rubrique JavaScript