Материал из JQuery
| $(«div.content»).offset() | возвратит координаты первого div-элемента с классом content, относительно начала страницы. |
| $(«div.content»).position() | возвратит координаты первого div-элемента с классом content, относительно ближайшего родителя с заданным позиционированием. |
| $(«.content»).offset( |
устанавливает координаты относительно начала страницы, равные (100, 30) для всех элементов с классом content. |
Замечание 1: при изменении координат с помощью функции offset, все выбранные элементы, у которых не задан тип позиционирования (то есть position = static), автоматически изменят позиционирование на относительное (relative).
Замечание 2: важно отметить, что используя метод .offset() вы получите позицию только первого элемента из всех выбранных. Если вам нужны значения координат всех элементов, то следует использовать конструкции типа .map() или .each().
В действии
Первый элемент из списка опустим на 30 пикселей.
Определение и применение
jQuery метод .offset() задает или возвращает значение координат для выбранных элементов (относительно документа).
При получении значений координат этот метод возвращает объект с двумя свойствами:
- позиция элемента от верхнего края документа в пикселях (top).
- позиция элемента от левого края документа в пикселях (left).
Если родительский элемент имеет статическое позиционирование (по умолчанию), то вложенный элемент вернет координаты относительно окна документа (первый случай на изображении), а не относительно родительского элемента. В отличии от метода .position() если родительский элемент имеет позиционирование отличное от статического (фиксированное, абсолютное, или относительное), то вложенный элемент также вернет координаты относительно окна документа (второй случай на изображении):
Пример использования jQuery метода .position().
Если Вам необходимо получить координаты элемента относительно окна документа независимо от того как позиционирован родительский элемент, то Вы можете воспользоваться jQuery методом .offset().
Более подробную информацию о позиционировании элементов вы можете получить в учебнике CSS в статье «Позиционирование элементов в CSS».
jQuery не поддерживает получение координат расположения скрытых элементов. Обратите внимание на отличие методов .position() и .offset(), если у элемента установлены внешние отступы (margin):
Отличие jQuery метода .position() и метода .offset().
Когда вы используете метод .offset() для установки значений, положение элемента определяется относительно документа, при этом если элемент к которому применяется позиционирование имеет статическое позиционирование ( static — по умолчанию), то jQuery устанавливает элементу встроенный стиль, определяющий, что элемент имеет относительное позиционирование (style = «position: relative «).
jQuery синтаксис:
| Параметр | Описание |
|---|---|
| < top: value, left: value > | Объект, который содержит два ключа — top (позиция от верхнего края элемента в пикселях) и left (позиция от левого края элемента в пикселях). |
| function (index, currentOffset) | Задает функцию, которая должна возвращать объект с новыми top и left свойствами (ключами).
|
Добавлен в версии jQuery
Пример использования
В этом примере с использованием jQuery метода .offset() мы получаем и выводим в консоль браузера:
-
в первом случае объект с двумя ключами — позиции (относительно документа) от верхнего и левого края элемента
в пикселях.
Результат нашего примера:
Пример использование jQuery метода .offset() для получения координат
Рассмотрим пример в котором мы используем метод .offset(), чтобы установить значения координат для выбранного элемента:
В этом примере с использованием jQuery метода .offset() мы:
-
выводим в консоль браузера информацию о текущих координатах элемента
в пикселях после установки новых значений.
Результат нашего примера:
Пример использование jQuery метода .offset() для установки координат
В следующем примере мы передадим в качестве параметра метода .offset() функцию:
В этом примере с использованием jQuery метода .offset() и функции, которая возвращает новый объект, содержащий новые значения координат, от верхнего и левого края документа (старое значение координат + 10), мы изменяем позицию элемента
при нажатии на кнопку.
Результат нашего примера:
Пример использования функции с методом .offset() для установки координат jQuery DOM методы
Это дает мне положение некоторого элемента от левого края главного окна:
Если этот элемент находится внутри какого-то другого элемента, и я хотел, чтобы позиция #bar относительно #foo (это родитель), как я могу это получить?
Я видел, что есть функция с именем offsetParent() , но когда консоль зарегистрирована, кажется, что эта функция не имеет каких-либо свойств, называемых —- +: = 3 =: + —- или left . Поэтому не уверен, что это можно использовать, чтобы получить то, что мне нужно.
Таким образом, в моем примере выше смещение должно составлять около 125 пикселей от края родительского элемента, а не от нескольких тысяч пикселей от края основного окна.