JavaScript/DOM/HTMLElement/offsetTop

Die Eigenschaft HTMLElement.offsetTop speichert den Abstand eines Elements zum oberen Rand des in der Eigenschaft offsetParent gespeicherten Offset-Elternelements..

Syntax

abstand = Element.offsetWidth();

• abstand: ganzzahliger Wert in Pixel

Anwendungsbeispiel

Beispiel ansehen …

document.getElementById("buehne").addEventListener("mousemove", Koordinaten);
var buehnenflaeche = document.getElementById("buehne");
 
 
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;
  var PosY = 0;
  var 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: offsetTop
• MDN: Element.offsetTop