Μέθοδος offset

Η μέθοδος offset επιτρέπει τη λήψη της θέσης ενός στοιχείου σε σχέση με το έγγραφο, σε αντίθεση με τη μέθοδο position, που λαμβάνει συντεταγμένες σε σχέση με τα περιθώρια του γονέα. Η μέθοδος offset είναι πιο χρήσιμη για τοποθέτηση ενός νέου στοιχείου πάνω από ένα υπάρχον για καθολικούς χειρισμούς, για παράδειγμα, για την υλοποίηση της λειτουργίας σύρσης και απόθεσης (drag-and-drop). Ως αποτέλεσμα, η μέθοδος επιστρέφει ένα αντικείμενο, που περιέχει τις ιδιότητες top και left. Σφάλματα στους υπολογισμούς μπορεί να προκύψουν εάν ο χρήστης αλλάξει τις διαστάσεις της σελίδας. Επίσης, η μέθοδος δεν λαμβάνει τις συντεταγμένες κρυφών στοιχείων.

Σύνταξη

Λήψη τρεχουσών συντεταγμένων. Σε ορισμένες περιπτώσεις οι τιμές που λαμβάνονται μπορεί να είναι κλασματικές:

javascript$(επιλογέας).offset();

Για να αλλάξετε τις συντεταγμένες ενός στοιχείου, πρέπει να περάσετε ένα αντικείμενο, που περιέχει τις ιδιότητες top και left:

javascript$(επιλογέας).offset({top: 40, left: 40});

Μπορούμε επίσης να εφαρμόσουμε μια καθορισμένη συνάρτηση σε κάθε στοιχείο στο σύνολο. Στην περίπτωση αυτή, η συνάρτηση θα λάβει ως πρώτη παράμετρο τον αριθμό του στοιχείου στο σύνολο, και ως δεύτερη παράμετρο - ένα αντικείμενο με συντεταγμένες top και left. Το this μέσα στη συνάρτηση θα δείχνει στο τρέχον στοιχείο. Οι τιμές των συντεταγμένων του στοιχείου θα αλλάξουν σε αυτές, που επιστρέφει η συνάρτηση:

javascript$(επιλογέας).width(function(αριθμός στο σύνολο, {τρέχουσες συντεταγμένες}));

Παράδειγμα

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

html<div id="result">κάντε κλικ σε ένα τετράγωνο ...</div>
<div id="test"></div>

css#test {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  background: green;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

javascript$('*', document.body).click(function(event) {
  let offset = $(this).offset();
  
  event.stopPropagation();
  $('#result').text('Αριστερά: ' + offset.left + ', Πάνω: ' + offset.top);
});

Παράδειγμα

Ας αλλάξουμε τις συντεταγμένες της δεύτερης παραγράφου:

html<p style="margin-left: 10px;">κείμενο1</p>
<p style="margin-left: 10px;">κείμενο2</p>

javascript$('p').last().offset({top: 40, left: 60});

Δείτε επίσης