Wie bekomme ich die obere linke Ecke des Tags ohne JQuery?

Question

Wie bekomme ich die obere linke Ecke des Tags ohne JQuery?

Answer 1

element.offsetLeft und element.offsetTop finden Sie die Top-let Ecke relevant an ihre Mutter

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; 
} 

es rekursiv Aufruf erhalten, bis Sie die Documment getroffen (document.parentNode null ist und endet rescursion) erhalten Sie es in Bezug auf das gesamte Dokument. Seien Sie vorsichtig, dass dies nicht mit iframe oder irgendetwas anderem kompatibel ist, das sein eigenes Dokument hat.

[Bearbeiten]

Die obige rekursive Funktion ist viel zu naiv und funktioniert nur auf sehr einfache Seiten. Sie können stattdessen über offsetParent iterieren, aber das verursacht auch einige Probleme.

Diese Lösung scheint vernünftig zu arbeiten, aber ich havnt es gründlich mich

getestet

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

Answer 2

Um die Position relativ zu seinem zu erhalten, verwenden:

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

Und jetzt können Sie benutze es so, alarmiere die linke pos:

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

Wenn Sie die absolute Position möchten, verwenden Sie diese:

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

Sie es genauso wie die getRelativePos Funktion nutzen zu können.