javascript - Finne elementets posisjon i forhold til dokumentet

Hva er den enkleste måten å bestemme et elements posisjon i forhold til dokumentet/kroppen/navigatorvinduet?

Akkurat nå bruker jeg .offsetLeft/offsetTop, men denne metoden gir deg bare posisjonen i forhold til overordnede element, så du må finne ut hvor mange overordnede elementer som er opp til body-elementet, for å vite posisjonen i forhold til body-/nettleservindu-/dokumentposisjonen.

Denne metoden er også for tungvint.

Svar #1

Du kan få top og left uten å traversere DOM slik:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

Svar #2

Du kan bruke element.getBoundingClientRect() for å hente elementets posisjon i forhold til visningsområdet.

Bruk deretter document.documentElement.scrollTop for å beregne visningsfeltets offset.

Summen av de to vil gi elementets posisjon i forhold til dokumentet:

element.getBoundingClientRect().top + document.documentElement.scrollTop

Svar #3

Du kan traversere offsetParent opp til toppnivået i DOM-en.

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

Svar #4

Jeg har funnet følgende metode å være den mest pålitelige når man håndterer kanttilfeller som snubler opp offsetTop/offsetLeft.

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

Relaterte artikler