Methode getBoundingClientRect
Die Methode getBoundingClientRect enthält
ein Objekt mit den Koordinaten des Elements. Die Koordinaten werden
in Bezug auf den sichtbaren Teil der Seite ohne
Berücksichtigung des Scrollens (relativ zum Fenster) berechnet. Das heißt,
wie bei der Eigenschaft position
mit dem Wert fixed.
Das zurückgegebene Objekt enthält die Eigenschaften: left,
top, right, bottom, width, height.
Es ist erwähnenswert, dass diese Eigenschaften nichts
mit CSS-Eigenschaften zu tun haben. Sie enthalten
die Abstände zu den entsprechenden Seiten des Elements.
Für left/right - vom linken Rand des sichtbaren
Bereichs der Seite, und für top/bottom - vom oberen.
Syntax
element.getBoundingClientRect();
Beispiel
Ermitteln wir die Koordinaten des Elements:
<div id="elem"></div>
#elem {
width: 100px;
height: 100px;
border: 1px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());
Siehe auch
-
Eigenschaft
offsetParent,
die das übergeordnete Element mit Positionierung enthält -
Eigenschaft
offsetTop,
die den Versatz des Elements von oben enthält -
Eigenschaft
offsetLeft,
die den Versatz des Elements von links enthält -
Methode
elementFromPoint,
die das Element anhand der Koordinaten zurückgibt
