JavaScript/DOM/HTMLElement/offsetLeft

Die Eigenschaft HTMLElement.offsetLeft speichert den Abstand eines Elementes zum linken Rand des in der Eigenschaft offsetParent gespeicherten Offset-Elternelementes.

Syntax

abstand = Element.offsetWidth();

• abstand: ganzzahliger Wert in Pixel

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: offsetLeft
• MDN: Element.offsetLeft