Метод offset

Метод offset омогућава добијање позиције елемента у односу на документ, за разлику од метода position, који добија координате у односу на одистак родитеља. Метод offset је кориснији при позиционирању новог елемента преко постојећег за глобалне манипулације, на пример, за имплементацију превлачења (drag-and-drop). Својим резултатом, метод враћа објекат, који садржи својства top и left. Грешка у прорачунима може се појавити ако корисник мења величину странице. Такође метод не добија координате скривених елемената.

Синтакса

Добити тренутне координате. У неким случајевима добијене вредности могу бити разломљене:

$(selector).offset();

Да бисте променили координате елемента, потребно је проследити објекат, који садржи својства top и left:

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

Такође можемо применити задату функцију на сваки елемент у скупу. При томе први параметар функција добија редни број елемента у скупу, а други параметар - објекат са координатама top и left. this унутар функције ће указати на тренутни елемент. Вредности координата елемента ће се променити на оне, које функција врати:

$(selector).width(function(redni broj u skupu, {trenutne koordinate}));

Пример

Хајде да добијемо позицију дива (зеленог квадрата), помоћу метода offset, а затим, обративши се кључeвима добијеног објекта, испишемо ту информацију:

<div id="result">кликните на квадрат ...</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 style="margin-left: 10px;">текст1</p>
<p style="margin-left: 10px;">текст2</p>

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

Види такође

метод position,
који омогућава добијање тренутних координата елемента
метод offsetParent,
који омогућава добијање најближег позиционираног претка елемента
метод css,
који омогућава добијање и мењање CSS стилова елемента