Comment obtenir le coin supérieur gauche du tag sans utiliser JQuery?

Question

Comment obtenir le coin supérieur gauche du tag sans utiliser JQuery?

Answer 1

element.offsetLeft et element.offsetTop vous obtiendrez des haut let correspondant à son parent

function top(el) { 
    var topVal = el.offsetTop; 
    if (el.parentNode) topVal+= top(el.parentNode); 
    return topVal; 
} 

function left(el) { 
    var leftVal = el.offsetLeft; 
    if (el.parentNode) leftVal+= left(el.parentNode); 
    return leftVal; 
} 

appeler récursive jusqu'à ce que vous frappez la documment (document.parentNode est nul et se termine rescursion) vous l'obtenir par rapport à le document entier. Méfiez-vous que ce n'est pas compatible avec iframe ou toute autre chose qui a son propre document.

[Modifier]

La fonction récursive ci-dessus est beaucoup trop naïve et ne fonctionne que sur les pages très simples. Vous pouvez itérer sur offsetParent à la place, mais cela cause aussi des problèmes.

Cette solution semble fonctionner raisonnablement, mais je havnt testé moi-même soigneusement

Retrieve the position (X,Y) of an HTML element

Answer 2

Pour obtenir la position par rapport à son parent, utilisez ceci:

function getRelativePos(el) { 
    var left=el.offsetX; 
    var top=el.offsetY; 
    return {top:top,left:left}; 
} 

Et maintenant, vous pouvez utilisez-le comme ceci, en alertant la position gauche:

var myElement=document.getElementById('myel'); 
alert(getRelativePos(myElement).left); 

Si vous voulez que la position absolue, utilisez ceci:

function getAbsPos(el) { 
    var rect=el.getBoundingClientRect(); 
    return {top:rect.top,left:rect.left}; 
} 

Vous pouvez l'utiliser comme la fonction getRelativePos.