Метод offset

Методът offset позволява получаване на позицията на елемент спрямо документа, за разлика от метода position, който получава координати спрямо отстъпите на родителя. Методът offset е по- полезен при позициониране на нов елемент върху съществуващ за глобални манипулации, например за реализиране на влачене (drag-and-drop). Като резултат методът връща обект, съдържащ свойствата top и left. Грешки в изчисленията могат да възникнат, ако потребителят промени размерите на страницата. Също така методът не получава координати на скрити елементи.

Синтаксис

Получаване на текущите координати. В някои случаи получените стойности могат да бъдат дробни:

$(селектор).offset();

За да промените координатите на елемент, трябва да предадете обект, съдържащ свойствата top и left:

$(селектор).offset({top: 40, left: 40});

Също така можем да приложим зададена функция към всеки елемент в набора. При това първият параметър функцията получава номера на елемента в набора, а вторият параметър - обект с координати top и left. this във функцията ще сочи към текущия елемент. Стойностите на координатите на елемента ще се променят на тези, които функцията върне:

$(селектор).width(function(номер в набора, {текущи координати}));

Пример

Нека получим позицията на дива (зеления квадрат), с помощта на метода offset, а след това, като се обърнем към ключовете на получения обект, да изведем тази информация:

<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 style="margin-left: 10px;">text1</p>
<p style="margin-left: 10px;">text2</p>

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

Вижте също

метод position,
който позволява получаване на текущите координати на елемент
метод offsetParent,
който позволява получаване на най-близкия позициониран предшественик на елемента
метод css,
който позволява получаване и промяна на CSS стиловете на елемент