Comment obtenir la position absolue d'un objet sur la page en Javascript ?

Question

Je souhaite obtenir la position absolue x,y d'un objet sur la page en Javascript. Comment puis-je faire cela ?

J'ai essayé obj.offsetTop y obj.offsetLeft mais celles-ci ne donnent que la position par rapport à l'élément parent. Je suppose que je pourrais faire une boucle et ajouter le décalage du parent, et le décalage de son parent, et ainsi de suite jusqu'à ce que j'arrive à l'objet sans parent, mais il semble qu'il devrait y avoir une meilleure façon de procéder. La recherche sur Google n'a pas donné grand-chose, et même la recherche sur le site de SO ne donne rien.

De plus, je ne peux pas utiliser jQuery.

Answer 1

var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

(Méthode volée sans vergogne à PrototypeJS ; le style du code, les noms des variables et la valeur de retour ont été modifiés pour protéger les innocents)

Answer 2

Je vous conseille vivement d'utiliser element.getBoundingClientRect() .

https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

Résumé

Renvoie un objet rectangle de texte qui enclo de texte.

Syntaxe

var rectObject = object.getBoundingClientRect();

Retours

La valeur retournée est un TextRectangle qui est l'objet de la rectangles retournés par getClientRects() pour l'élément, c'est-à-dire le CSS associées à l'élément.

La valeur retournée est un TextRectangle qui contient les re left , top , right y bottom propriétés décrivant pixels, dont le haut-gauche est relatif au haut-gauche de la fenêtre de visualisation.

Voici un tableau de compatibilité des navigateurs, extrait du site MDN :

+---------------+--------+-----------------+-------------------+-------+--------+
|    Feature    | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
+---------------+--------+-----------------+-------------------+-------+--------+
| Basic support | 1.0    | 3.0 (1.9)       | 4.0               | (Yes) | 4.0    |
+---------------+--------+-----------------+-------------------+-------+--------+

Il est largement supporté et est très facile à utiliser, sans compter qu'il est très rapide. Voici un article de John Resig sur le sujet : http://ejohn.org/blog/getboundingclientrect-is-awesome/

Vous pouvez l'utiliser comme suit :

var logo = document.getElementById('hlogo');
var logoTextRectangle = logo.getBoundingClientRect();

console.log("logo's left pos.:", logoTextRectangle.left);
console.log("logo's right pos.:", logoTextRectangle.right);

Voici un exemple très simple ejemplo : http://jsbin.com/awisom/2 (vous pouvez visualiser et modifier le code en cliquant sur "Editer dans la corbeille JS" dans le coin supérieur droit).

Ou voici un autre exemple utilisant la console de Chrome :

Nota:

Je dois mentionner que la width y height des attributs du getBoundingClientRect() La valeur de retour de la méthode undefined dans Internet Explorer 8. Il fonctionne cependant dans Chrome 26.x, Firefox 20.x et Opera 12.x. Solution de contournement dans IE8 : pour width vous pourriez soustraire les attributs droit et gauche de la valeur de retour, et pour height vous pouvez soustraire les attributs du bas et du haut ( comme ceci ).

Answer 3

Vous obtiendrez une valeur différente dans chaque navigateur FireFox et IE lorsque vous utilisez offsetTop et offsetLeft. Je pense que cela vous permet de ne pas perdre votre temps comme je le fais.