Trouver X / Y d'un élément HTML avec JavaScript

Voici comment je le fais:

// Based on: http://www.quirksmode.org/js/findpos.html var getCumulativeOffset = function (obj) { var left, top; left = top = 0; if (obj.offsetParent) { do { left += obj.offsetLeft; top += obj.offsetTop; } while (obj = obj.offsetParent); } return { x : left, y : top }; }; 

Cela peut être délicat selon le navigateur et la version. Je suggère d'utiliser jQuery et le plugin des positions.

Vous pouvez utiliser une bibliothèque telle que Prototype ou jQuery, ou vous pouvez utiliser cette fonction pratique :

Il renvoie un tableau.

 myPos = findPos(document.getElementById('something')) x = myPos[0] y = myPos[1] function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft curtop = obj.offsetTop while (obj = obj.offsetParent) { curleft += obj.offsetLeft curtop += obj.offsetTop } } return [curleft,curtop]; } 

Pour ce qu'il vaut, voici une version récursive:

 function findPos(element) { if (element) { var parentPos = findPos(element.offsetParent); return [ parentPos.X + element.offsetLeft, parentPos.Y + element.offsetTop ]; } else { return [0,0]; } } 

Vous pouvez ajouter deux propriétés au Element.prototype pour obtenir la partie supérieure / gauche de n'importe quel élément.

 window.Object.defineProperty( Element.prototype, 'documentOffsetTop', { get: function () { return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 ); } } ); window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', { get: function () { return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 ); } } ); 

Voici une démonstration comparant les résultats au offset().top de jQuery offset().top et .left : http://jsfiddle.net/ThinkingStiff/3G7EZ/

Je ne suis pas sûr de ce dont vous avez besoin, et ces choses sont toujours relatives (écran, fenêtre, document). Mais quand j'avais besoin de comprendre cela, j'ai trouvé ce site utile: http://www.mattkruse.com/javascript/anchorposition/source.html

Et j'ai également constaté que le plugin tooltip créé pour jQuery avait toutes sortes d'informations intéressantes sur les astuces de positionnement x et y (regardez sa classe viewport et le support sous-jacent que jQuery fournit). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/