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