Obtenir la position d'une balise div/span

Question

Quelqu'un peut-il me montrer comment obtenir le top & left position d'un div o span lorsqu'un élément n'est pas spécifié ?

ie :

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

Dans ce qui précède, si je le fais :

document.getElementById('11a').style.top

La valeur de 55px est renvoyé. Cependant, si j'essaie de le faire pour span 12a', alors rien n'est renvoyé.

J'ai un tas de div / span sur une page dont je ne peux pas préciser le top / left mais j'ai besoin d'afficher un div directement sous cet élément.

Answer 1

Vous pouvez appeler la méthode getBoundingClientRect() sur une référence à l'élément. Vous pouvez alors examiner le top , left , right et/ou bottom les propriétés...

var offsets = document.getElementById('11a').getBoundingClientRect();
var top = offsets.top;
var left = offsets.left;

Si vous utilisez jQuery, vous pouvez utiliser le code plus succinct...

var offsets = $('#11a').offset();
var top = offsets.top;
var left = offsets.left;

Answer 2

Cette fonction vous indiquera la position x,y de l'élément par rapport à la page. En fait, vous devez passer en revue tous les parents de l'élément et additionner leurs décalages.

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

Toutefois, si vous souhaitez simplement connaître la position x et y de l'élément par rapport à son conteneur, il vous suffit d'utiliser la commande suivante :

var x = el.offsetLeft, y = el.offsetTop;

Pour placer un élément directement sous celui-ci, vous devez également connaître sa hauteur. Celle-ci est enregistrée dans la propriété offsetHeight/offsetWidth.

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;

Answer 3

Alors que la réponse de @nickf fonctionne. Si vous ne vous souciez pas des anciens navigateurs, vous pouvez utiliser cette version purement Javascript. Fonctionne dans IE9+, et autres

var rect = el.getBoundingClientRect();

var position = {
  top: rect.top + window.pageYOffset,
  left: rect.left + window.pageXOffset
};

Answer 4

Comme Alex l'a noté, vous pouvez utiliser jQuery offset() pour obtenir la position relative au flux du document. Utilisez position() pour obtenir ses coordonnées x,y par rapport au parent.

EDIT : Changement document.ready para window.load porque load attend tous les éléments pour que vous obteniez leur taille au lieu de simplement préparer le DOM. D'après mon expérience, load permet de réduire le nombre d'éléments mal positionnés par Javascript.

$(window).load(function(){ 
  // Log the position with jQuery
  var position = $('#myDivInQuestion').position();
  console.log('X: ' + position.left + ", Y: " + position.top );
});

Answer 5

Pour ceux qui n'ont besoin que de la position haute ou gauche, de légères modifications au code lisible de @Nickf font l'affaire.

function getTopPos(el) {
    for (var topPos = 0;
        el != null;
        topPos += el.offsetTop, el = el.offsetParent);
    return topPos;
}

y

function getLeftPos(el) {
    for (var leftPos = 0;
        el != null;
        leftPos += el.offsetLeft, el = el.offsetParent);
    return leftPos;
}