Metoden offset

Metoden offset gør det muligt at hente elementers position i forhold til dokumentet, i modsætning til metoden position, som henter koordinater i forhold til forældreelementets margener. Metoden offset er mere nyttig, når man positionerer et nyt element oven på et eksisterende element til globale manipulationer, for eksempel til implementering af træk-og-slip (drag-and-drop). Metoden returnerer et objekt, der indeholder egenskaberne top og left. Fejl i beregningerne kan opstå, hvis brugeren ændrer sidens størrelse. Metoden kan heller ikke hente koordinater for skjulte elementer.

Syntaks

Hent aktuelle koordinater. I nogle tilfælde kan de hentede værdier være brøker:

$(selektor).offset();

For at ændre elementets koordinater skal man sende et objekt, der indeholder egenskaberne top og left:

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

Vi kan også anvende en given funktion på hvert element i sættet. Her vil funktionen som første parameter modtage elementets nummer i sættet, og som anden parameter - et objekt med koordinaterne top og left. this inde i funktionen vil pege på det aktuelle element. Elementets koordinatværdier vil blive ændret til dem, som funktionen returnerer:

$(selektor).width(function(nummer i sættet, {aktuelle koordinater}));

Eksempel

Lad os hente positionen af div'en (den grønne firkant) ved hjælp af metoden offset, og derefter, ved at tilgå nøglerne i det modtagne objekt, udskrive denne information:

<div id="result">klik 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

Lad os ændre koordinaterne for andet afsnit:

<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 gør det muligt at hente elementers aktuelle koordinater
metoden offsetParent,
som gør det muligt at hente elementets nærmeste positionerede forfader
metoden css,
som gør det muligt at hente og ændre elementets CSS-stile