Methode offset

Die Methode offset ermöglicht es, die Position eines Elements relativ zum Dokument zu erhalten, im Gegensatz zur Methode position, die Koordinaten relativ zu den Versätzen des Elternelements erhält. Die Methode offset ist nützlicher beim Positionieren eines neuen Elements über einem vorhandenen Element für globale Manipulationen, z.B. für die Implementierung von Drag-and-Drop (drag-and-drop). Als Ergebnis liefert die Methode ein Objekt, das die Eigenschaften top und left enthält. Fehler in den Berechnungen können auftreten, wenn der Benutzer die Seitengröße ändert. Außerdem erhält die Methode keine Koordinaten von versteckten Elementen.

Syntax

Aktuelle Koordinaten abrufen. In einigen Fällen können die erhaltenen Werte gebrochen sein:

$(Selector).offset();

Um die Koordinaten eines Elements zu ändern, muss ein Objekt übergeben werden, das die Eigenschaften top und left enthält:

$(Selector).offset({top: 40, left: 40});

Wir können auch eine bestimmte Funktion auf jedes Element im Set anwenden. Dabei erhält die Funktion als ersten Parameter die Nummer des Elements im Set und als zweiten Parameter - ein Objekt mit den Koordinaten top und left. this innerhalb der Funktion verweist auf das aktuelle Element. Die Koordinatenwerte des Elements ändern sich zu denen, die von der Funktion zurückgegeben werden:

$(Selector).width(function(Index, {aktuelle Koordinaten}));

Beispiel

Lassen Sie uns die Position der Div (des grünen Quadrats) mit der Methode offset abrufen und dann, indem wir auf die Schlüssel des erhaltenen Objekts zugreifen, diese Information ausgeben:

<div id="result">click a square ...</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('Left: ' + offset.left + ', Top: ' + offset.top);
});

Beispiel

Lassen Sie uns die Koordinaten des zweiten Absatzes ändern:

<p style="margin-left: 10px;">text1</p>
<p style="margin-left: 10px;">text2</p>

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

Siehe auch

Methode position,
die es ermöglicht, die aktuellen Koordinaten eines Elements abzurufen
Methode offsetParent,
die es ermöglicht, den nächstgelegenen positionierten Vorfahr eines Elements abzurufen
Methode css,
die es ermöglicht, CSS-Stile eines Elements abzurufen und zu ändern