JavaScript/DOM/Element/offsetLeft

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

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

  • DOM 1.0
  • JavaScript 1.5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari


Syntax

abstand = Element.offsetWidth();

  • abstand: ganzzahliger Wert in Pixel

Anwendungsbeispiel[Bearbeiten]

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[Bearbeiten]