Τοποθέτηση στο jQuery

Για την εργασία με τις συντεταγμένες των στοιχείων στο jQuery υπάρχουν οι μέθοδοι position και offset.

Αυτές οι μέθοδοι χρησιμοποιούνται για τη λήψη ή την αλλαγή των τρεχουσών συντεταγμένων ενός στοιχείου και ως αποτέλεσμα επιστρέφουν ένα αντικείμενο που περιέχει τις ιδιότητες top και left.

Μπορεί να προκύψουν σφάλματα στους υπολογισμούς εάν ο χρήστης αλλάζει τις διαστάσεις της σελίδας. Επίσης, οι μέθοδοι δεν λαμβάνουν τις συντεταγμένες κρυφών στοιχείων.

Η μέθοδος offset λαμβάνει τη θέση του στοιχείου σε σχέση με το έγγραφο, ενώ η position λαμβάνει τη θέση του στοιχείου σε σχέση με τα περιθώρια του γονέα.

Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα HTML:

html<div id="parent">
<p id="test">κείμενο</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

Στις παραγράφους έχουν εφαρμοστεί στυλ CSS:

css#parent {
  width: 150px;
  border: 1px solid blueviolet;
}
#test {
  margin: 5px;
  text-align: center;
  outline: 1px solid green;
}

Ας πάρουμε τη θέση του div test με αυτές τις μεθόδους και, προσπελάζοντας τα κλειδιά του αντικειμένου που λήφθηκε, να εμφανίσουμε αυτές τις πληροφορίες παρακάτω στις παραγράφους:

javascriptlet offset = $('#test').offset();
$('#text1').text(
  '(OFFSET()) αριστερά: ' + offset.left + ', πάνω: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
  '(POSITION()) αριστερά: ' + position.left + ', πάνω: ' + position.top
);