Metoden offset

Metoden offset lar deg hente posisjonen til et element i forhold til dokumentet, i motsetning til metoden position, som henter koordinater i forhold til foreldreelementets innrykk. Metoden offset er mer nyttig ved posisjonering av et nytt element over et eksisterende element for globale manipulasjoner, for eksempel for å implementere dra og slipp (drag-and-drop). Som resultat returnerer metoden et objekt som inneholder egenskapene top og left. Feil i beregninger kan oppstå hvis brukeren endrer størrelsen på siden. Metoden henter heller ikke koordinater for skjulte elementer.

Syntaks

Hent nåværende koordinater. I noen tilfeller kan de hentede verdiene være brøkdeler:

$(selector).offset();

For å endre koordinatene til et element, må du sende et objekt som inneholder egenskapene top og left:

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

Vi kan også bruke en angitt funksjon på hvert element i settet. I dette tilfellet vil funksjonen motta nummeret til elementet i settet som første parameter, og som andre parameter - et objekt med koordinatene top og left. this inni funksjonen vil peke på det nåværende elementet. Koordinatverdiene til elementet vil endres til de som returneres av funksjonen:

$(selector).width(function(indeks i settet, {nåværende koordinater}));

Eksempel

La oss hente posisjonen til en div (den grønne firkanten), ved hjelp av metoden offset, og deretter, ved å henvise til nøklene i det oppnådde objektet, vise denne informasjonen:

<div id="result">klikk på en firkant ...</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);
});

Eksempel

La oss endre koordinatene til det andre avsnittet:

<p style="margin-left: 10px;">tekst1</p>
<p style="margin-left: 10px;">tekst2</p>

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

Se også

metoden position,
som lar deg hente nåværende koordinater for et element
metoden offsetParent,
som lar deg hente nærmeste posisjonerte forfedre til et element
metoden css,
som lar deg hente og endre CSS-stiler for et element