Metoda offset

Metoda offset permite obținerea poziției elementului relativ la document, spre deosebire de metoda position, care obține coordonatele relativ la marginile părintelui. Metoda offset este mai utilă atunci când poziționăm un element nou peste unul existent pentru manipulări globale, de exemplu, pentru implementarea funcționalității de glisare și plasare (drag-and-drop). Ca rezultat, metoda returnează un obiect care conține proprietățile top și left. Erori de calcul pot apărea dacă utilizatorul schimbă dimensiunile paginii. De asemenea, metoda nu obține coordonatele elementelor ascunse.

Sintaxă

Obține coordonatele curente. În unele cazuri valorile obținute pot fi fracționale:

$(selector).offset();

Pentru a modifica coordonatele elementului, trebuie să transmiți un obiect care conține proprietățile top și left:

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

De asemenea, putem aplica o funcție definită fiecărui element din set. În acest caz, primul parametru al funcției va primi numărul elementului din set, iar al doilea parametru - un obiect cu coordonatele top și left. this în interiorul funcției va indica către elementul curent. Valorile coordonatelor elementului se vor schimba în cele returnate de funcție:

$(selector).width(function(număr în set, {coordonate curente}));

Exemplu

Hai să obținem poziția div-ului (pătratul verde), cu ajutorul metodei offset, apoi, accesând cheile obiectului obținut, să afișăm această informație:

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

Exemplu

Hai să schimbăm coordonatele celui de-al doilea paragraf:

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

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

Vedeți și

metoda position,
care permite obținerea coordonatelor curente ale elementului
metoda offsetParent,
care permite obținerea celui mai apropiat strămoș poziționat al elementului
metoda css,
care permite obținerea și modificarea stilurilor CSS ale elementului