Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie komme ich an die Koordinaten eines Elements?

Bei NN4

besitzen Elemente vom Typ Image, Link und Anchor die Eigenschaften x/y, die die absolute Position des Elements liefern. (Vorsicht: In einem Layer bedeutet "absolut" immer "relativ zum Parent-Layer"!)

Beispiel:

Testbild

Der Code dazu:

    <img src="bild.jpg" onmouseup="alert(this.x+'/'+this.y)">

Die Koordinaten eines Layers relativ zum (Gesamt-)Dokument erhält man über die Eigenschaften pageX und pageY. Um die Position eines beliebigen Elements zu erhalten, kann man also das Element relativ positionieren und dann diese Eigenschaften auslesen. Meistens funktioniert das.

Beispiel:

Wo steht das?


Der Code dazu:

     <a href="javascript:void(0)" 
        onclick="alert(document.fett.pageX
                  + '/'
                  + document.fett.pageY);">Wo<a> 
     steht <b id="fett" style="position:relative">das</b>?

 

Der IE

bietet zwar (ab Version 4) die Element-Eigenschaften offsetLeft und offsetTop, diese enthalten aber nur die Position relativ zum offsetParent, also zum nächsthöheren Container-Element. Um die Position relativ zum Dokument zu bekommen, muss man sich durch die offsetParent-Hierarchie durcharbeiten und alle Werte zusammen zählen.

Diese Funktionen übernehmen das:

  function absLeft(el) {
     return (el.offsetParent)? 
     el.offsetLeft+absLeft(el.offsetParent) : el.offsetLeft;
  }

  function absTop(el) {
     return (el.offsetParent)? 
     el.offsetTop+absTop(el.offsetParent) : el.offsetTop;
  }

Beispiel-Anwendung:

Wo steht das?


Der Code dazu:

   Wo steht 
   <b onclick="alert(absLeft(this)
                      + '/'
                      + absTop(this))">das</b>?

Anmerkung: Auch IE 5 auf Mac spielt hier mit. :-)

 

Im W3C-DOM

erhält man die aktuell berechneten CSS-Werte eines Elements über die Methode getComputedStyle() des defaultView-Objekts, das eine CSSStyleDeclaration zurückliefert, aus der sich wiederum mit Hilfe der Methode getPropertyValue() die einzelnen Eigenschaften ermitteln lassen. Wenn also el eine Referenz auf ein Element ist, liefert

  document.defaultView.getComputedStyle(el,null).getPropertyValue("left")

die linke Koordinate und

  document.defaultView.getComputedStyle(el,null).getPropertyValue("top")

die obere.

 

Netscape 6 unterstützt sowohl die IE- als auch die W3C-Methode. Er liefert dabei immer die Koordinaten relativ zum Dokument, nicht (wie IE) relativ zum offsetParent.

Opera 5 verhält sich wie IE.
Opera 4 (probiert mit 4.02) meldet "undefined/undefined".

top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Wolfgang Schwarz (©).

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel