(JavaScript/DOM) Absolute Position von Elementen

Problematik

Die Element-Objekteigenschaften offsetLeft (linke obere Ecke: links), offsetTop (linke obere Ecke: oben), offsetWidth (Breite) und offsetHeight (Höhe) funktionieren erfreulicherweise in allen modernen Browsern (in Gecko seit jeher, im Internet Explorer seit Version 4.0, in Opera seit Version 5.12 und in Safari ebenfalls). Dank des Document Object Models (DOM) sind mittlerweile auch die Zugriffe auf diese Objekteigenschaften standardisiert möglich.

Die Werte der Eigenschaften offsetLeft und offsetTop beziehen sich jedoch auf den Abstand der linken oberen Ecke eines Elements zur linken oberen Ecke seines Elternelements, nicht etwa auf die Abstände zur linken oberen Ecke des Dokuments oder gar des Anzeigefensters. Nicht selten möchte man jedoch die absoluten Werte der linken oberen Elementecke ermitteln. Mittels einer kleinen Schleifenkonstruktion lässt sich dieser Wunsch erfüllen.

Code

function findPosX(obj) {
   var curleft = 0;
   if(obj.offsetParent) {
      while(obj.offsetParent) {
         curleft += obj.offsetLeft
         obj = obj.offsetParent;
      }
   }
   else if(obj.x) 
     curleft = obj.x;
   return curleft;
}
 
function findPosY(obj) {
   var curtop = 0;
   if(obj.offsetParent) {
      while(obj.offsetParent) {
         curtop += obj.offsetTop
         obj = obj.offsetParent;
      }
   }
   else if(obj.y)
      curtop = obj.y;
   return curtop;
}

Erläuterung

Die beiden Funktionen findPosX() und findPosY() erwarten ein Elementobjekt obj als Parameter. Das kann beispielsweise ein mit document.getElementById() bestimmtes Element sein, oder ein aktuelles Element, das mit this als Objekt ansprechbar ist. Beispielaufruf:
xpos = findPosX(document.getElementById("picture"));
ypos = findPosY(document.getElementById("picture"));

In den Variablen curleft bzw. curtop werden die absoluten Wert für "linke obere Ecke des Element von links" bzw. "linke obere Ecke des Elements von oben" ermittelt. Dazu wird in einer while-Schleife auf offsetParent zugegriffen. Diese Eigenschaft speichert das Elementobjekt des Elternelements. Die while-Schleife läuft solange, wie es zum jeweils aktuellen Element ein Elternelement gibt. Wenn es ein Elternelement gibt, wird es am Ende des Schleifenkörpers durch obj = obj.offsetParent; zum neuen aktuellen Element. Da die Werte, die offsetLeft bzw. offsetTop liefern, sich immer aufs Elternelement beziehen, arbeitet sich die Schleife auf diese Weise über alle Elternelemente bis hinauf zum Dokumentelement und addiert jeweils den Wert für offsetLeft bzw. offsetTop zum aktuellen Wert von curleft bzw. curtop hinzu.

Das Konstrukt else if(obj.x) curleft = obj.x; und sein Gegentück beim y-Wert bedarf noch einer Bemerkung. Die Objekteigenschaften x und y kennen nur Netscape-kompatible Browser, und zwar nur bei Link-Objekten. Diese Objekte speichern direkt die absolute linke bzw. obere Position des Elements.