.offset()Возвращает: Объект
Описание: Получение текущих координат первого элемента в наборе сопоставленных элементов относительно документа.
Этот метод позволяет нам получить текущее положение элемента (в частности, его рамку, исключая отступы) относительно документа. Отличием от этого является .position(), который получает текущее положение относительно родительского элемента с отступом. При позиционировании нового элемента поверх существующего для глобальных манипуляций (в частности, для реализации перетаскивания) .offset() является более полезным.
.offset() возвращает объект, содержащий свойства top и left.
Примечание: jQuery не поддерживает получение координат отступов скрытых элементов или учет отступов, заданных для элемента <html> документа.
Хотя можно получить координаты элементов с visibility:hidden установленным, display:none исключается из дерева отображения, и, следовательно, его позиция неопределена.
Дополнительные заметки:
- Число, возвращаемое API, связанными с размерами, включая
.offset(), в некоторых случаях может быть дробным. Код не должен предполагать, что это целое число. Кроме того, размеры могут быть некорректными, когда пользователь увеличивает масштаб страницы; браузеры не предоставляют API для обнаружения этого состояния.
Примеры:
Получение отступа второго абзаца:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $( "p" ).last();
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html> Демо:
Нажмите, чтобы увидеть отступ.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
color: blue;
width: 200px;
cursor: pointer;
}
span {
color: red;
cursor: pointer;
}
div.abs {
width: 50px;
height: 50px;
position: absolute;
left: 220px;
top: 35px;
background-color: green;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div id="result">Click an element.</div>
<p>
This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>
<script>
$( "*", document.body ).on( "click", function( event ) {
var offset = $( this ).offset();
event.stopPropagation();
$( "#result" ).text( this.tagName +
" coords ( " + offset.left + ", " + offset.top + " )" );
});
</script>
</body>
</html> Демо:
.offset( coordinates )Возвращает: jQuery
Описание: Установка текущих координат каждого элемента в наборе сопоставленных элементов относительно документа.
-
версия добавлена: 1.4.offset( coordinates )
- coordinatesТип: ОбъектОбъект, содержащий свойства
topиleft, которые являются числами, указывающими новые координаты по вертикали и горизонтали для элементов.
-
-
версия добавлена: 1.4.offset( function )
- functionФункция для возврата координат для установки. Принимает индекс элемента в коллекции в качестве первого аргумента и текущие координаты во втором аргументе. Функция должна возвращать объект с новыми свойствами
topиleft.
-
Метод установщика .offset() позволяет нам переместить элемент. Положение рамки элемента задается относительно документа. Если свойство стиля position элемента в настоящее время static, оно будет установлено в relative для возможности этого перемещения.
Пример:
Установка отступа второго абзаца:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
$( "p" ).last().offset({ top: 10, left: 30 });
</script>
</body>
</html> 
