JavaScript/DOM/HTMLElement/offsetParent

Die Eigenschaft HTMLElement.offsetParent speichert dasjenige Elternelement eines Elements, von dessen Positionierung die Positionierung des Elements abhängt. offsetParent ist dabei eine Art Zeiger auf das übergeordnete Element.

Syntax

parentObj = element.offsetParent;

Anwendungsbeispiel

Beispiel ansehen …

  function init() {
    document.getElementById('buehne').addEventListener('mousemove', Koordinaten);
  }

  function FindePosition(oElement){
    if(typeof( oElement.offsetParent ) != "undefined"){
      for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent){
        posX += oElement.offsetLeft;
        posY += oElement.offsetTop;
      }
       return [ posX, posY ];
    }
    else {
      return [ oElement.x, oElement.y ];
    }
  }

function Koordinaten(e) {
  var PosX = 0,
      PosY = 0,
      buehnenflaeche = document.getElementById('buehne'),
      ImgPos = FindePosition(buehnenflaeche);
  if (!e) var e = window.event;
  if (e.pageX || e.pageY) {
    PosX = e.pageX;
    PosY = e.pageY;
  }
  else if (e.clientX || e.clientY) {
      PosX = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      PosY = e.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
  }
  PosX = PosX - ImgPos[0];
  PosY = PosY - ImgPos[1];
  document.getElementById('x').innerText = PosX;
  document.getElementById('y').innerText = PosY;
}

Im Beispiel wird ein mousemove-EventHandler aktiviert, der die Position der Maus innerhalb des main-Elements anzeigt. Die Position wird mit offsetLeft und offsetTop berechnet.

Weblinks

• W3C: offsetParent
• MDN: Element.offsetParent