Μέθοδος offset

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

Σύνταξη

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

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

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

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

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

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

Παράδειγμα

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

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

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

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

Παράδειγμα

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

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

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

Δείτε επίσης

μέθοδος position,
που επιτρέπει τη λήψη τρεχουσών συντεταγμένων στοιχείου
μέθοδος offsetParent,
που επιτρέπει τη λήψη του πλησιέστερου τοποθετημένου προγόνου ενός στοιχείου
μέθοδος css,
που επιτρέπει τη λήψη και αλλαγή των στυλ CSS ενός στοιχείου