# Метод 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 стили элемента

←→
↑