Метод 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});

Смотрите также