Метод 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">кликни на квадрат ...</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 стиловите на елементот