Metoda offset

Metoda offset umožňuje získat pozici elementu vzhledem k dokumentu, na rozdíl od metody position, která získává souřadnice vzhledem k okrajům rodiče. Metoda offset je více užitečná při pozicování nového elementu přes existující pro globální manipulace, například pro implementaci přetahování (drag-and-drop). Výsledkem metody je objekt obsahující vlastnosti top a left. Chyby ve výpočtech mohou nastat, pokud uživatel mění velikost stránky. Také metoda nezískává souřadnice skrytých elementů.

Syntaxe

Získat aktuální souřadnice. V některých případech získané hodnoty mohou být desetinná čísla:

$(selektor).offset();

Pro změnu souřadnic elementu je třeba předat objekt obsahující vlastnosti top a left:

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

Také můžeme aplikovat zadanou funkci na každý element v sadě. Přitom první parametr funkce obdrží číslo elementu v sadě, a druhý parametr - objekt se souřadnicemi top a left. this uvnitř funkce bude ukazovat na aktuální element. Hodnoty souřadnic elementu se změní na ty, které vrátí funkce:

$(selektor).width(function(číslo v sadě, {aktuální souřadnice}));

Příklad

Získejme pozici divu (zeleného čtverce), pomocí metody offset, a poté, přistoupíme-li ke klíčům získaného objektu, vypišme tuto informaci:

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

Příklad

Změňme souřadnice druhého odstavce:

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

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

Viz také

metoda position,
která umožňuje získat aktuální souřadnice elementu
metoda offsetParent,
která umožňuje získat nejbližšího pozicovaného předka elementu
metoda css,
která umožňuje získat a měnit CSS styly elementu