Метад offset

Метад offset дазваляе атрымліваць пазіцыю элемента адносна дакумента, у адрозненне ад метаду position, які атрымлівае каардынаты адносна водступаў бацькі. Метад offset больш карысны пры пазіцыянаванні новага элемента паверху існуючага для глабальных маніпуляцый, напрыклад, для рэалізацыі перацягвання (drag-and-drop). Сваім вынікам, метад вяртае аб'ект, які змяшчае ўласцівасці top і left. Памылкі ў вылічэннях могуць узнікаць, калі карыстальнік мяняе памеры старонкі. Таксама метад не атрымлівае каардынаты схаваных элементаў.

Сінтаксіс

Атрымаць бягучыя каардынаты. У некаторых выпадках атрыманыя значэнні могуць быць дробнымі:

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

Каб змяніць каардынаты элемента, трэба перадаць аб'ект, які змяшчае ўласцівасці top і left:

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

Таксама мы можам ужыць зададзеную функцыю да кожнага элемента ў наборы. Пры гэтым першым параметрам функцыя атрымае нумар элемента ў наборы, а другім параметрам - аб'ект з каардынатамі top і left. this унутры функцыі будзе паказваць на бягучы элемент. Значэнні каардынат элемента зменяцца на тыя, якія верне функцыя:

javascript$(селектар).width(function(нумар у наборы, {бягучыя каардынаты}));

Прыклад

Давайце атрымаем пазіцыю дыва (зялёнага квадрата), з дапамогай метаду offset, а затым, звярнуўшыся да ключоў атрыманага аб'екта, вывядзем гэтую інфармацыю:

html<div id="result">click a square ...</div>
<div id="test"></div>

css#test {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  background: green;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

javascript$('*', document.body).click(function(event) {
  let offset = $(this).offset();
  
  event.stopPropagation();
  $('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Прыклад

Давайце зменім каардынаты другога абзаца:

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

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

Глядзіце таксама