Az offset metódus

Az offset metódus lehetővé teszi egy elem pozíciójának lekérését a dokumentumhoz viszonyítva, ellentétben a position metódussal, amely a szülő margóitól viszonyított koordinátákat kapja meg. Az offset metódus hasznosabb új elem pozicionálásakor egy meglévő elem fölé globális manipulációkhoz, például húzd és ejtsd (drag-and-drop) megvalósításához. Eredményeként a metódus egy objektumot ad vissza, amely top és left tulajdonságokat tartalmaz. Számítási hibák léphetnek fel, ha a felhasználó megváltoztatja az oldal méretét. A metódus nem kap meg rejtett elemek koordinátáit sem.

Szintaxis

Aktuális koordináták lekérése. Egyes esetekben a kapott értékek tört számok lehetnek:

$(selector).offset();

Ahhoz, hogy megváltoztassuk egy elem koordinátáit, át kell adnunk egy objektumot, amely top és left tulajdonságokat tartalmaz:

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

Egy megadott függvényt alkalmazhatunk minden egyes elemre a halmazban. Ekkor az első paraméterként a függvény megkapja az elem sorszámát a halmazban, a második paraméterként pedig egy objektumot a top és left koordinátákkal. A this a függvényen belül az aktuális elemre mutat. Az elem koordinátáinak értéke azokra az értékekre változik, amelyeket a függvény visszaad:

$(selector).width(function(index, {currentCoords}));

Példa

Kérjük le a div (zöld négyzet) pozícióját az offset metódus segítségével, majd a kapott objektum kulcsaira hivatkozva jelenítsd meg ezt az információt:

<div id="result">kattints a négyzetre ...</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);
});

Példa

Változtassuk meg a második bekezdés koordinátáit:

<p style="margin-left: 10px;">szöveg1</p>
<p style="margin-left: 10px;">szöveg2</p>

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

Lásd még

a position metódus,
amely lehetővé teszi az elem aktuális koordinátáinak lekérését
a offsetParent metódus,
amely lehetővé teszi az elem legközelebbi pozicionált ősének lekérését
a css metódus,
amely lehetővé teszi az elem CSS stílusainak lekérését és módosítását