|
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.
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:
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>?
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. :-)
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".
Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/.
Dieser Text wurde erstellt von Wolfgang Schwarz (©).
© S. Mintert, Ch. Kühnel
______ letzte Änderung: 01.01.2002 ______
Original-URL dieser Datei: http://dcljs.de/faq/antwort.php?Antwort=dhtml_koordinaten