web-dev-qa-db-fra.com

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

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

J'ai essayé obj.offsetTop et obj.offsetLeft, mais ceux-ci ne donnent que la position relative à l'élément parent. Je suppose que je pourrais parcourir en boucle et ajouter l'offset du parent, et l'offset de son parent, et ainsi de suite jusqu'à arriver à l'objet sans parent, mais il semble qu'il devrait y avoir une meilleure façon. Googler n’a pas été très fréquent, et même SO) la recherche sur le site n’a rien trouvé.

De plus, je ne peux pas utiliser jQuery.

javascriptdomoffset
78
Kip
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; style du code, noms de variable et valeur de retour modifiés pour protéger l'innocent)

113
eyelidlessness

Je recommanderais certainement d'utiliser element.getBoundingClientRect () .

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

Sommaire

Retourne un objet rectangle de texte qui entoure un groupe de rectangles de texte.

Syntaxe

var rectObject = object.getBoundingClientRect();

Résultats

La valeur renvoyée est un objet TextRectangle qui est l'union des rectangles renvoyés par getClientRects () pour l'élément, c'est-à-dire les boîtes de bordure CSS associées à l'élément.

La valeur renvoyée est un objet TextRectangle, qui contient les propriétés left, top, right et bottom en lecture seule décrivant la bordure. zone, en pixels, avec le coin supérieur gauche par rapport au coin supérieur gauche de la fenêtre.

Voici un tableau de compatibilité de navigateur tiré du site MDN lié:

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

Il est largement pris en charge et est très facile à utiliser, sans compter que c'est vraiment rapide. Voici un article connexe de John Resig: http://ejohn.org/blog/getboundingclientrect-is-awesome/

Vous pouvez l'utiliser comme ceci:

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 : http://jsbin.com/awisom/2 (vous pouvez afficher et modifier le code en cliquant sur "Modifier dans JS Bin" dans le coin supérieur droit).

Ou voici un autre en utilisant la console de Chrome: Using element.getBoundingClientRect() in Chrome

Remarque:

Je dois mentionner que les attributs width et height de la valeur de retour de la méthode getBoundingClientRect() sont undefined dans Internet Explorer 8. Cela fonctionne dans Chrome 26.x, Firefox 20.x et Opera 12.x cependant. Solution de contournement dans IE8: pour width, vous pouvez soustraire le droit de la valeur de retour et left attributs, et pour height, vous pouvez soustraire les attributs bottom et top ( comme celui-ci ).

126
Sk8erPeter