Metoden offset

Metoden offset låter dig få elementets position i förhållande till dokumentet, till skillnad från metoden position, som får koordinater i förhållande till förälderns marginaler. Metoden offset är mer användbar när man positionerar ett nytt element över ett befintligt för globala manipulationer, till exempel för att implementera dra och släpp (drag-and-drop). Som resultat returnerar metoden ett objekt som innehåller egenskaperna top och left. Fel i beräkningar kan uppstå om användaren ändrar sidans storlek. Metoden får heller inte koordinater för dolda element.

Syntax

Få aktuella koordinater. I vissa fall kan de erhållna värdena vara bråktal:

$(selector).offset();

För att ändra elementets koordinater måste du skicka ett objekt som innehåller egenskaperna top och left:

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

Vi kan också applicera en given funktion på varje element i uppsättningen. Då får funktionen det första parameterelementets nummer i uppsättningen, och den andra parametern - ett objekt med koordinater top och left. this inuti funktionen kommer att peka på det aktuella elementet. Elementets koordinatvärden ändras till de som funktionen returnerar:

$(selector).width(function(index in set, {current coordinates}));

Exempel

Låt oss få positionen för div:en (den gröna kvadraten), med hjälp av metoden offset, och sedan, genom att hänvisa till nycklarna i det erhållna objektet, skriva ut denna information:

<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);
});

Exempel

Låt oss ändra koordinaterna för det andra stycket:

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

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

Se även

metoden position,
som låter dig få elementets aktuella koordinater
metoden offsetParent,
som låter dig få elementets närmaste positionerade förfader
metoden css,
som låter dig få och ändra elementets CSS-stilar