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

Question

Comment puis-je trouver les coordonnées XY d'un élément HTML (DIV) à partir de JavaScript si elles n'étaient pas définies explicitement?

Answer 1

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

Answer 2

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

Et je trouve aussi que l'info-bulle du plugin quelqu'un fait pour jQuery avait toutes sortes de perspicacité intéressant de x, des astuces de positionnement y (regarder la fenêtre classe et le support sous-jacent jQuery le prévoit). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

Vous pouvez utiliser une bibliothèque, comme Prototype ou jQuery, ou vous pouvez utiliser this handy function:

Il retourne 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]; 
} 

Answer 4

Voilà 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 
    }; 
}; 

Answer 5

Pour ce que ça vaut la peine, 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]; 
    } 
} 

Answer 6

Vous pouvez ajouter deux propriétés à la Element.prototype pour obtenir haut/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émo comparant les résultats à jQuery et de offset().top.left: http://jsfiddle.net/ThinkingStiff/3G7EZ/