Как узнать координаты элемента в браузере
Обновлено: 08.07.2024
Чтобы перемещать и позиционировать элементы на экране в браузере имеется система координат. Оси координат начинаются в левом верхнем углу экрана и идут вправо для оси x и вниз для оси y.
Позиционирование с помощью координат может быть относительно окна браузера или относительно отдельного элемента. Всего существует две системы координат: одна начинается от угла HTML-страницы (документа), а вторая от угла окна браузера. С помощью первой можно определять как элемент расположен относительно всей страницы, а с помощью второй – как элемент расположен относительно окна браузера и того что там находится. Объекты события мыши и тач-события содержат координаты места на экране и в документе, где событие произошло: pageX/pageY – для документа, clientX/clientY – для экрана.
Координатами элемента является расстояние в пикселях от осей системы координат до его левого верхнего угла. С помощью метода элемента getBoundingClientRect можно получить подробные данные о координатах элемента и его размере.
Как пишется
Как понять
Система координат в браузере аналогична плоской системе координат из школьной алгебры. Есть две оси: ось y и ось x, на этой плоскости располагаться все элементы сайта. Единственным отличием от классической системы координат является то, что положительное направление оси y в браузере повёрнуто вниз. Это значит, что элементы с положительным значением по оси y будут находится внизу относительно оси x, а с отрицательным – наверху.
Позиция элемента задаётся числом пикселей от начала системы координат по соответствующей оси.
Начало системы координат можно отсчитывать относительно окна браузера, либо относительно всего документа. Когда страница не прокручена, то начала этих осей совпадают в левом верхнем углу окна. Если прокручивать страницу вниз, то соответственно начало координат документа останется таким же, а начало оси координат окна будет смещаться. Такое разделение может быть полезно для разных задач, например можно анимировать элементы, только когда они попадают на экран, считая координаты относительно документа. А можно давать перетаскивать какой-либо элемент, но только в пределах окна браузера.
На рисунках pageX и pageY – оси системы координат относительно документа, а clientX и clientY – оси системы координат относительно окна браузера. Соответственно pageXOffset и pageYOffset – это смещение относительно всего документа, а clientXOffset и clientYOffset – относительно окна. На практике используются очень похожие названия, потому для текущих примеров будем использовать их.
Ниже схема осей координат, когда страница не прокручена. В таком состоянии оси совпадают, и координаты элементов относительно окна и относительно документа будут совпадать.
Но если прокрутить страницу (например вниз), но ситуация изменится. Начало документа уйдёт наверх, а значит и начало осей координат. Оси координат окна теперь будут начинаться там, где мы остановим прокрутку.
💡 Стоит обратить внимание на то, что координаты – это расстояние от осей до его верхнего левого угла. Потому стрелки на схеме начинаются от угла элемента с текстом Button.
Смещение относительно окна браузера
В объекте события мыши из полей clientX/clientY можно узнать в каком месте относительно системы координат окна произошло событие, например клик.
Если нужно узнать как элемент расположен относительно окна, то в этом поможет метод getBoundingClientRect . Вызов этого метода возвращает объект с полями x , y , top , left , right , bottom , width и height , то есть полная информация о геометрии элемента. В полях x и y содержаться координаты элемента.
💡 Позиционирование относительно окна гораздо проще понять, если посмотреть, как располагается элемент с position: fixed . Элемент с этим свойством будет находиться в окне в одних и те же координатах, вне зависимости от того насколько прокручен документ.
Смещение относительно документа
Если нужно получить данные в каком месте документа произошло событие, то это можно узнать из полей pageX/pageY в объекте события.
Информацию о том, как элемент расположен относительно документа нельзя узнать из какого-то свойства или метода, её необходимо вычислять самостоятельно. Самым простым способом это можно сделать сложив координаты относительно окна из метода getBoundingClientRect со смещением самого окна относительно документа. Смещение окна браузера можно узнать из полей window.pageXOffset и window.pageYOffset – это число пикселей на которое прокручен документ по горизонтали и вертикали.
💡 Позиционирование относительно документа так же можно понять, если посмотреть как располагается элемент с position: absolute . При прокрутке окна этот элемент будет смещаться вместе с ним.
Наглядно как работают оси, и как располагаются элементы можно посмотреть в демо. В начальном состоянии положения осей и элементов, которые расположены относительно них совпадают. Оси относительно экрана сделаны крупнее, чтобы их было видно всегда. Если прокрутить страницу по вертикали или горизонтали будет видно как оси относительно экрана остаются на месте, а оси относительно документа уходят вместе с движением прокрутки.
На практике
Егор Огарков
🛠 С помощью значения координат можно узнавать какой элемент находится в окне по этим координатам. Метод document.elementFromPoint возвращает элемент по переданным ему координатам.
💡 Метод вернёт самый глубоко вложенный элемент в DOM-дереве по этим координатам, который может оказаться не тем, что вам нужен.
🛠 Координаты чаще всего используются для создания поведения перетаскивания элементов по экрану. Используя clientX/clientY или pageX/pageY из события можно менять координаты самого элемента.
Не "как динамический во время scroll определить текущее местоположение элемента по отношению к родителю", а как получить абсолютные координаты относительно левого верхнего угла содержимого страницы.
Второй вопрос "определить текущее местоположение элемента по отношению к родителю" ещё раз повторяю, абсолютные координаты относительно левого верхнего угла содержимого страницы.
при использовании absolute нужны координаты относительно левого верхнего угла.
Немного комментариев: ф-ция getBoundingClientRect вызвала спор, mozilla цитата
Возвращаемое значение getBoundingClientRect — это объект TextRectangle, содержащий свойства только для чтения left, top, right и bottom, описывающие бокс с границами в пиксельном измерении. Значения top и left даются относительно верхнего левого угла порта просмотра.
т.е. уже с учётом скролла и отступов документа, которые приходится вычитать если нужны координаты относительно начала системы координат листа (левый верхний угол документа). Даная функция getBoundingClientRect даст верный результат, если выполняется два условия: 1) позиция скроллинга ноль (на старте часто так), 2) если у документа (body) отступы не заданы, или заданы в ноль. Так как эти условия не всегда соблюдены - приходится использывать более сложные решения.
От себя добавлю, что если используется система отчёта position=fixed то getBoundingClientRect выдаст координаты которые подойдут к этой системе отчёта, но fixed редко используется, поскольку при изменении позиции скрола - позиция на экране сохраняется и елемент будет "плавать". А для absolute и static прийдётся делать пересчёт коодинат. Система relative - просто относительные координаты, в отдельных случаях её можно использовать.
Чтобы были понятнее эти различия, приведу такой пример. Пусть у нас имеется вот такой документ:
Если мы его отобразим в окне браузера, то увидим красное окно (элемент div) поверх всей страницы с положением, не зависящем от скроллинга. Но, если заменить стиль на:
то при прокрутке элемент начинает также смещаться вместе со всей страницей. Фактически, мы здесь имеем следующую картину (см. рисунок). В режиме fixed координаты left и top верхнего левого угла элемента div отсчитываются от границ клиентской области окна браузера (обозначим эти параметры через clientX, clientY). В режиме absolute отсчет идет от начала документа – параметры pageX, pageY.
Теперь поставим перед собой такую задачу: нужно с помощью скрипта расположить наш блок div точно по центру окна браузера. Если мы запишем такую программу:
То по центру будет верхний левый угол, а не сам блок. Здесь из значений centerX, centerY нужно еще вычесть половину ширины и высоты блока div. Эти величины возьмем из свойств offsetWidth/offsetHeight нашего элемента, получим:
Все, теперь блок встал точно по центру окна. Так вот, если мы теперь захотим узнать все координаты и размеры блока div, то всю эту информацию можно получить с помощью метода
Например, добавим строчки:
И обновим документ. В консоле увидим параметры:
x/y, top/left, width/height, bottom/right
Все они представлены на рисунке ниже. Причем,
right = left+width
bottom = top+height
Использовать эти методы бывает очень удобно для получения актуальных значений координат и размеров какого-либо элемента-тега в HTML-документе.
Здесь вы можете заметить два дублирующих свойства: top = y и left = x. Зачем нужны x и y? Дело в том, что при отрицательных значениях width или height значения x и y будут соответствовать нижнему правому углу, а top и left продолжат указывать на верхний левый. Правда такие моменты редко используются на практике, да и некоторые браузеры не возвращают величины x/y (например, IE и Edge).
Также следует иметь в виду, что параметры right и bottom не имеют ничего общего с аналогичными параметрами в CSS. Они только называются одинаково, но их значения совершенно разные.
Если мы прокрутим страницу так, чтобы элемент ушел из области видимости, то получим отрицательные значения координат по высоте. Что, в общем-то логично, так как координаты отсчитываются от верхней и левой границ клиентского окна браузера.
elementFromPoint(x, y)
Далее, рассмотрим метод документа
который возвращает самый глубокий в иерархии элемент, на который указывает координата (x,y). Это бывает полезно, когда мы хотим узнать, что находится в данной позиции HTML-страницы. Для примера возьмем прежний документ и удалим ранее написанный скрипт. У нас блок div окажется поверх пунктов списка. Теперь возьмем координату (101, 110) так, чтобы мы указывали и на блок div и на список. Вызовем метод elementFromPoint с этими значениями и посмотрим, что он нам вернет:
Получили элемент div. Но что тогда означает фраза «самый глубокий в иерархии элемент»? Разве мы не должны были бы получить элемент списка, так как он находится глубже на странице? Не совсем так: список и div являются сестринскими элементами, то есть, у них один родитель. В этом случае возвращается тот, что находится выше. А вот если мы поместим координату над списком:
то как раз и получим самый глубокий элемент, то есть, тег <li>, а не тег <ul>, который является родительским по отношению к li. Вот так следует понимать работу этого метода.
Этот метод возвращает элементы находящиеся в области видимости окна браузера, то есть, когда координаты x/y находятся в клиентской области. В других случаях, например, при отрицательных значениях координат, мы получим значение null.
Вычисление координат относительно документа
Часто в практике программирования требуется получить координаты какого-либо элемента относительно HTML-документа, а не окна браузера. Как это можно сделать? Ранее рассмотренный метод
- pageY = clientY + высота вертикально прокрученной части документа.
- pageX = clientX + ширина горизонтально прокрученной части документа.
Вспоминая предыдущее занятие, величины прокрутки можно взять из свойств объекта window:
window.pageYOffset и window.pageXOffset
В результате, можно реализовать следующую функцию для вычисления координат элемента относительно документа:
Если мы теперь будем прокручивать страницу, то значения координат будут оставаться неизменными, т.к. их значение отсчитывается от начала документа.
Итак, мы с вами рассмотрели способы позиционирования элементов в окне браузера и научились определять и задавать их координаты положения в HTML-документе.
Видео по теме
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта
Координаты курсора мышки относительно экрана монитора, страницы или окна браузера
- экрана монитора ( screenX / Y ),
- HTML-дкумента ( pageX / Y ),
- области просмотра окна браузера ( clientX / Y ).
Образец (щелчок по любому месту зелёного прямоугольника):
Определить элемент, который находится под курсором
document.elementFromPoint( X , Y ) возвращает верхний элемент, который находится на координатах ( X , Y ) относительно верхнего левого угла области просмотра окна браузера.
Образец (щелчок по любому месту зелёного прямоугольника):
Курсор находится над тегомпервый второй
Дополнение: этот же код применяется чтобы узнать место, куда нажал пользователь сенсорного устройства (планшет, телефон).
Координаты курсора мышки внутри элемента (div, img)
В Mozilla Firefox не работают offsetX и offsetY . Самое простое решение проблемы указано тут:
Образец (щелчок по любому месту зелёного прямоугольника):
Дополнение: этот же код применяется чтобы узнать место, куда нажал пользователь сенсорного устройства (планшет, телефон).
Координаты расположения элемента
Расстояние от верхнего/левого края окна браузера до элемента
Метод elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
Образец (прокрутка или изменение окна браузера, изменение размера элемента):
Расстояние от правого/нижнего края окна браузера до элемента
Чтобы узнать отступ справа или снизу от элемента до края области просмотра окна браузера:
Образец (прокрутка или изменение окна браузера, изменение размера элемента):
Позиция одного элемента относительно другого
Рассчитать позицию одного элемента относительно другого (например, потомка относительно предка) можно, если получить разницу их координат (например, координаты родителя вычесть из координат дочернего элемента):
Смещение относительно elem.offsetParent
Размер элемента: ширина, высота, прокрутка
Получить значение свойства CSS можно благодаря getComputedStyle(elem[, pseudo]) . Предварительно советую ознакомиться с блочной моделью CSS.
Образец (щелчок по прямоугольнику с серой рамкой, его изменение или прокрутка содержимого):
Размер монитора, страницы, окна браузера: ширина, высота, прокрутка
Размер страницы, учитывающий transform и margin для <html> , который можно получить, пока страница не была прокручена.
Читайте также: