Metoda offset

Metoda offset pozwala uzyskać pozycję elementu względem dokumentu, w odróżnieniu od metody position, która uzyskuje współrzędne względem marginów rodzica. Metoda offset jest bardziej przydatna przy pozycjonowaniu nowego elementu na istniejącym dla globalnych manipulacji, na przykład do implementacji przeciągania (drag-and-drop). Swoim wynikiem, metoda zwraca obiekt, zawierający właściwości top i left. Błędy w obliczeniach mogą powstawać, jeśli użytkownik zmienia rozmiary strony. Również metoda nie uzyskuje współrzędnych ukrytych elementów.

Składnia

Uzyskać aktualne współrzędne. W niektórych przypadkach uzyskane wartości mogą być ułamkowe:

$(selektor).offset();

Aby zmienić współrzędne elementu, trzeba przekazać obiekt, zawierający właściwości top i left:

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

Również możemy zastosować określoną funkcję do każdego elementu w zestawie. Przy tym pierwszym parametrem funkcja otrzyma numer elementu w zestawie, a drugim parametrem - obiekt ze współrzędnymi top i left. this wewnątrz funkcji będzie wskazywać na aktualny element. Wartości współrzędnych elementu zmienią się na te, które zwróci funkcja:

$(selektor).width(function(numer w zestawie, {aktualne współrzędne}));

Przykład

Uzyskajmy pozycję diva (zielonego kwadratu), za pomocą metody offset, a następnie, odwoławszy się do kluczy uzyskanego obiektu, wypiszmy tę informację:

<div id="result">kliknij kwadrat ...</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);
});

Przykład

Zmieńmy współrzędne drugiego akapitu:

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

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

Zobacz też

metoda position,
która pozwala uzyskać aktualne współrzędne elementu
metoda offsetParent,
która pozwala uzyskać najbliższego zpositionowanego przodka elementu
metoda css,
która pozwala uzyskiwać i zmieniać style CSS elementu