Jquery положение элемента относительно окна браузера

Обновлено: 07.07.2024

учитывая идентификатор HTML DOM, как получить положение элемента относительно окна в JavaScript / JQuery? Это не то же самое, что относительно документа или смещения родителя, так как элемент может быть внутри iframe или некоторых других элементов. Мне нужно получить местоположение экрана прямоугольника элемента (как в положении и измерении), как он отображается в настоящее время. Отрицательные значения допустимы, если элемент в данный момент находится вне экрана (прокручивается).

Это для приложения iPad (WebKit / WebView). Всякий раз, когда пользователь нажимает на специальную ссылку в UIWebView , Я должен открыть диалоговое окно, которое отображает дополнительную информацию о ссылке. В представлении popover должна отображаться стрелка, указывающая на ту часть экрана, которая вызывает его.

первоначально, захватить .смещение положение элемента и вычислить его относительное положение относительно окна

вы можете дать ему попробовать в этой скрипка

после нескольких строк кода объясняется, как это может быть решено

, когда .свиток выполняется событие, вычисляется относительное положение элемента относительно объекта окна

когда прокрутка выполняется в браузере, мы вызываем вышеуказанную функцию обработчика событий

попробуйте ограничивающую рамку. Это просто:

вы можете назвать это так

я фокусируюсь на IE только в соответствии с моим требованием, но подобное можно сделать для других браузеров

это больше похоже на то, что вы хотите всплывающую подсказку для выбранной ссылки. Есть много подсказок jQuery, попробуйте jQuery qTip. Она имеет много вариантов и легко изменить стили.

существует также jQuery .offset (); который вернет положение относительно документа.

TL; DR

.getBoundingClientRect() кажется универсальная. .offset () и .scrollTop() поддерживаются начиная с jQuery 1.2. Спасибо @user372551 и @prograhammer. Чтобы использовать DOM в iframe, см. решение @ ImranAnsari.

В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).

Перемещение окна

В JavaScript имеются следующие методы объекта window для перемещения окна:

moveTo – абсолютное перемещение окна в указанные координаты экрана;
moveBy – перемещения окна на указанное количество пикселей относительно его текущего положения.

Синтаксис метода « window.moveTo »:

Пример, в котором переместим окно в точку (50, 75):

Пример, в котором произведём перемещение окна в левый верхний угол экрана:

Синтаксис метода « window.moveBy »:

Например, сдвинем окно на 75px вправо и на 100px вниз:

В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:

окно (или вкладка) должно быть создано с помощью window.open ;
в окне не должно находиться более чем одной вкладки.

Изменение размеров окна

Методы объекта window для изменения размеров окна:

resizeTo – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные значения;
resizeBy – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные величины относительно его текущих размеров.

В JavaScript методы resizeTo и resizeBy выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).

Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

Например, уменьшим размеры окна (его ширину и высоту) на 50px:

Прокрутка документа

В JavaScript имеются следующие методы объекта window для прокрутки документа:

scroll ( scrollTo ) - прокручивает страницу до указанного места в абсолютном выражении;
scrollBy — прокручивает документ на определённое количество пикселей относительно текущей позиции.

Синтаксис метода scroll (метод scrollTo выполняет то же самое, что scroll и не отличается по синтаксису):

Синтаксис метода scrollBy :

Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод scroll или scrollBy с определёнными значениями:

В jQuery определить положение элемента на странице можно посредством методов offset() и position() .

Первый метод ( offset ) позволяет узнать положение элемента относительно левого верхнего угла страницы (объекта document ). Второй же метод ( position ) выполняет это относительно левого верхнего угла ближайшего предка, который расположен вне основного потока (т.е. имеет в качестве значения свойства position значение absolute , fixed , relative или sticky ). Если же у элемента нет такого предка, они все располагаются в нормальном потоке, то его положение будет рассчитываться аналогично тому, как это выполняет метод offset() , т.е. относительно верхнего левого угла страницы.

В качестве результата данные методы возвращают объект, содержащий два свойства:

top – положение относительно верхней границы документа или ближайшего предка;
left – положение относительно левой границы документа или ближайшего предка.

Примечание: Если выборка содержит несколько элементов, то методы offset и position возвращают текущие координаты только для первого из них.

Установка координат

Кроме этого метод offset позволяет также установить координаты. Осуществляет это он относительно левого верхнего угла страницы (объекта document ) для всех элементов текущего набора.

Установка координат осуществляется посредством указания одного из следующих значений в качестве параметра:

объекта, содержащего свойства left и top ;
функции, которая в качестве результата должна возвращать объект со свойствами left и top (в качестве аргументов ей передаются индекс текущего элемента в выбранном наборе и текущие координаты этого элемента в виде объекта).

Рассмотрим как осуществляется установка координат с помощью следующих примеров.

Пример 1. При клике на элемент с id="mydiv" будем увеличивать его текущие координаты относительно документа на 50px по X и по Y.

Пример 2. При клике на одном из трёх элементов с классом blocks будем:

у первого элемента (индекс 0 в наборе) увеличивать его Y-координату на 50px;
у второго элемента (индекс 1 в наборе) увеличивать его X-координату на 50px;
у третьего элемента (индекс 2 в наборе) увеличивать его X и Y координаты на 50px.

Примечание: Метод position не имеет функционала для установки координат, он может использоваться только для их чтения в соответствии с алгоритмом приведённым выше.

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

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

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

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

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

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

Более подробную информацию о позиционировании элементов вы можете получить в учебнике CSS в статье "Позиционирование элементов в CSS".

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

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

jQuery синтаксис:

index - возвращает индекс позиции элемента в наборе (среди выбранных элементов).
currentoffset - возвращает текущие координаты выбранного элемента.

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

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

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

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

Результат нашего примера:

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

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

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

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

Результат нашего примера:

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

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

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

Результат нашего примера:

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

Читайте также: