jQuery метод .offset()

Определение и применение

jQuery метод .offset() задает или возвращает значение координат для выбранных элементов (относительно документа).

При получении значений координат этот метод возвращает объект с двумя свойствами:

• позиция элемента от верхнего края документа в пикселях (top).
• позиция элемента от левого края документа в пикселях (left).

Если родительский элемент имеет статическое позиционирование (по умолчанию), то вложенный элемент вернет координаты относительно окна документа (первый случай на изображении), а не относительно родительского элемента. В отличии от метода .position() если родительский элемент имеет позиционирование отличное от статического (фиксированное, абсолютное, или относительное), то вложенный элемент также вернет координаты относительно окна документа (второй случай на изображении):

Пример использования jQuery метода .position().

Если Вам необходимо получить координаты элемента относительно окна документа независимо от того как позиционирован родительский элемент, то Вы можете воспользоваться jQuery методом .offset().

jQuery не поддерживает получение координат расположения скрытых элементов. Обратите внимание на отличие методов .position() и .offset(), если у элемента установлены внешние отступы (margin):

Отличие jQuery метода .position() и метода .offset().

Когда вы используете метод .offset() для установки значений, положение элемента определяется относительно документа, при этом если элемент к которому применяется позиционирование имеет статическое позиционирование (static - по умолчанию), то jQuery устанавливает элементу встроенный стиль, определяющий, что элемент имеет относительное позиционирование (style = "position: relative").

jQuery синтаксис:

Синтаксис 1.2

Возвращение значений:

$( selector ).offset() // метод используется без параметров

Установка значений:

$( selector ).offset({top: value, left: value}) // объект с двуми ключами top и left

Синтаксис 1.4

Установка значений:

$( selector ).offset( function( index, currentOffset ) )

function - Function

index - Integer

currentOffset - Object

Добавлен в версии jQuery

Пример использования

Метод .offset() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p style="margin-top: 200px">My position</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        var pos = $('p').offset()
        var posBody = $('body').offset()
        console.log(pos) // выводим в консоль объект с двуми значениями (позиция элемента <p>)
        console.log(pos.top) // выводим в консоль значение ключа top (позиция элемента <p> от верхнего края)
        console.log(pos.left) // выводим в консоль значение ключа left (позиция элемента <p> от левого края)
        console.log(posBody) // выводим в консоль объект с двуми значениями (позиция элемента <body>)
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .offset() мы получаем и выводим в консоль браузера:

• в первом случае объект с двумя ключами - позиции (относительно документа) от верхнего и левого края элемента <p> в пикселях (обратите внимание, что внешние отступы margin учитываются).
• во втором случае значение от верхнего края элемента <p> в пикселях.
• в третьем значение от левого края элемента <p> в пикселях.
• в четвертом случае объект с двумя ключами - позиции (относительно документа) от верхнего и левого края элемента <body> в пикселях (обратите внимание, что внешние отступы margin учитываются).

Рассмотрим пример в котором мы используем метод .offset(), чтобы установить значения координат для выбранного элемента:

Метод .offset() — пример 2

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p>My position</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        // задаем функцию при нажатиии на элемент <button>
        var pos = $('p')
        console.log(pos.offset()) // выводим в консоль браузера текущие координаты элемента
        pos.offset({ left: 100, top: 200 }) // устанавливаем значения координат для элемента <p>
        console.log(pos.offset()) // выводим в консоль браузера координаты элемента после изменения
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .offset() мы:

• выводим в консоль браузера информацию о текущих координатах элемента <p> в пикселях.
• устанавливаем новые значения координат для элемента <p> (смещаем элемент от левого края на 100 пикселей, а от верхнего края на 200 пикселей). Обратите внимание, что элемент автоматически получает встроенный стиль, определяющий, что элемент имеет относительное позиционирование (position: relative) и значения от левого и верхнего края за минусом значений текущей позиции, таким образом, чтобы сумма соответствовала заданному нами числу смещения.
• затем мы выводим в консоль браузера информацию о координатах элемента <p> в пикселях после установки новых значений.

В следующем примере мы передадим в качестве параметра метода .offset() функцию:

Пример использования функции с методом .offset() для установки координат

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<p>My position</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('p').offset(function (index, currentOffset) {
            var newOffset = {}
            newOffset.left = currentOffset.left + 10
            newOffset.top = currentOffset.top + 10
            return newOffset
        })
    })
})

style.css

CSS

В этом примере с использованием jQuery метода .offset() и функции, которая возвращает новый объект, содержащий новые значения координат, от верхнего и левого края документа (старое значение координат + 10), мы изменяем позицию элемента <p> при нажатии на кнопку.