Metóda offset

Metóda offset umožňuje získať polohu prvku vzhľadom na dokument, na rozdiel od metódy position, ktorá získava súradnice vzhľadom na odsadenia rodiča. Metóda offset je užitočnejšia pri pozicionovaní nového prvku nad existujúcim pre globálne manipulácie, napríklad pri implementácii pretiahnutia (drag-and-drop). Svojím výsledkom metóda vráti objekt, obsahujúci vlastnosti top a left. Chyby vo výpočtoch môžu vzniknúť, ak používateľ mení veľkosti stránky. Taktiež metóda nezíska súradnice skrytých prvkov.

Syntax

Získať aktuálne súradnice. V niektorých prípadoch získané hodnoty môžu byť desatinné:

$(selektor).offset();

Na zmenu súradníc prvku je potrebné odovzdať objekt, obsahujúci vlastnosti top a left:

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

Taktiež môžeme aplikovať zadanú funkciu na každý prvok v súbore. Pričom prvým parametrom funkcia získa číslo prvku v súbore, a druhým parametrom - objekt so súradnicami top a left. this vo vnútri funkcie bude ukazovať na aktuálny prvok. Hodnoty súradníc prvku sa zmenia na tie, ktoré funkcia vráti:

$(selektor).width(function(číslo v súbore, {aktuálne súradnice}));

Príklad

Získajme pozíciu divu (zeleného štvorca), pomocou metódy offset, a potom, prístupom k kľúčom získaného objektu, vypíšme túto informáciu:

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

Príklad

Zmeňme súradnice druhého odseku:

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

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

Pozrite tiež

metóda position,
ktorá umožňuje získať aktuálne súradnice prvku
metóda offsetParent,
ktorá umožňuje získať najbližšieho pozicionovaného predka prvku
metóda css,
ktorá umožňuje získať a zmeniť CSS štýly prvku