Question Récupérer la position (X, Y) d'un élément HTML


Je veux savoir comment obtenir la position X et Y des éléments HTML tels que img et div en JavaScript.


1007
2018-01-14 09:35


origine


Réponses:


La bonne approche consiste à utiliser element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer a pris en charge cela depuis tant que vous êtes susceptible de se soucier et il a finalement été normalisé dans Vues CSSOM. Tous les autres navigateurs l'ont adopté il y a longtemps.

Certains navigateurs renvoient également des propriétés de hauteur et de largeur, bien que cela ne soit pas standard. Si vous vous inquiétez de la compatibilité avec les anciens navigateurs, vérifiez les révisions de cette réponse pour une implémentation dégradée optimisée.

Les valeurs renvoyées par element.getBoundingClientRect() sont relatifs à la fenêtre. Si vous en avez besoin par rapport à un autre élément, soustrayez simplement un rectangle de l'autre:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

1303
2017-07-09 14:06



Les bibliothèques vont jusqu'à quelques longueurs pour obtenir des corrections précises pour un élément.
voici une fonction simple qui fait le travail dans toutes les circonstances que j'ai essayé.

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; 

256
2018-01-14 10:04



Cela a fonctionné pour moi (modifié de la plus haute réponse votée):

function getOffset(el) {
  rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  }
}

En utilisant cela, nous pouvons appeler

getOffset(element).left

ou

getOffset(element).top

137
2018-01-29 18:46



Si la page inclut - au moins - tout "DIV", la fonction donnée par meouw renvoie la valeur "Y" au-delà des limites de pages actuelles. Afin de trouver la position exacte, vous devez gérer à la fois "offsetParent" et "parentNode".

Essayez le code ci-dessous (il est vérifié pour FF2):


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};


29
2017-08-12 20:14



Vous pouvez ajouter deux propriétés à Element.prototype pour obtenir le haut / gauche de n'importe quel élément.

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

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

Ceci s'appelle comme ceci:

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

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


28
2018-01-14 08:57



Les éléments HTML sur la plupart des navigateurs auront: -

offsetLeft
offsetTop

Ceux-ci spécifient la position de l'élément par rapport à son parent le plus proche qui a la disposition. Ce parent peut souvent être accédé par bif à la propriété offsetParent.

IE et FF3 ont

clientLeft
clientTop

Ces propriétés sont moins courantes, elles spécifient une position des éléments avec la zone client de ses parents (la zone rembourrée fait partie de la zone client mais la bordure et la marge ne l'est pas).


25
2018-01-14 09:43



Pour récupérer la position par rapport à la page efficacement, et sans utiliser une fonction récursive: (inclut IE également)

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

21
2017-07-26 01:49



Que diriez-vous de quelque chose comme ceci, en passant ID de l'élément et il retournera le gauche ou le haut, nous pouvons également les combiner:

1) trouver à gauche

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) trouver le top

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

ou 3) trouver à gauche et haut ensemble

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

18
2018-05-22 13:09



Vous pourriez être mieux servi en utilisant un framework JavaScript, qui a des fonctions pour renvoyer de telles informations (et bien plus encore!) D'une manière indépendante du navigateur. Voici quelques-uns:

Avec ces frameworks, vous pouvez faire quelque chose comme: $('id-of-img').top pour obtenir la coordonnée y-pixel de l'image.


17
2018-01-14 09:47



jQuery .décalage() obtiendra les coordonnées actuelles du premier élément, ou fixera les coordonnées de chaque élément, dans l'ensemble des éléments correspondants, par rapport au document.


14
2017-08-18 14:43