Метад 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 стылі элемента