Μέθοδος getBoundingClientRect

Η μέθοδος getBoundingClientRect περιέχει αντικείμενο συντεταγμένων του στοιχείου. Οι συντεταγμένες υπολογίζονται σε σχέση με το ορατό μέρος της σελίδας χωρίς να λαμβάνεται υπόψη η κύλιση (σε σχέση με το παράθυρο). Δηλαδή όπως με την ιδιότητα position στην τιμή fixed.

Στο αντικείμενο που επιστρέφεται περιέχονται οι ιδιότητες: left, top, right, bottom, width, height. Αξίζει να σημειωθεί ότι αυτές οι ιδιότητες δεν έχουν τίποτα κοινό με τις ιδιότητες CSS. Σε αυτές περιέχονται οι αποστάσεις από τις αντίστοιχες πλευρές του στοιχείου. Για τις left/right - από το αριστερό όριο της ορατής περιοχής της σελίδας, και για τις top/bottom - από το πάνω.

Σύνταξη

στοιχείο.getBoundingClientRect();

Παράδειγμα

Ας πάρουμε τις συντεταγμένες του στοιχείου:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
}

let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

Δείτε επίσης

ιδιότητα offsetParent,
που περιέχει τον γονέα με τοποθέτηση
ιδιότητα offsetTop,
που περιέχει τη μετατόπιση του στοιχείου από πάνω
ιδιότητα offsetLeft,
που περιέχει τη μετατόπιση του στοιχείου από αριστερά
μέθοδος elementFromPoint,
που επιστρέφει το στοιχείο από συντεταγμένες