Как получить координаты элемента javascript
Перейти к содержимому

Как получить координаты элемента javascript

  • автор:

Координаты

Чтобы передвигать элементы по экрану, нам следует познакомиться с системами координат.

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

  1. Относительно окна браузера – как position:fixed , отсчёт идёт от верхнего левого угла окна.
    • мы будем обозначать эти координаты как clientX/clientY , причина выбора таких имён будет ясна позже, когда мы изучим свойства событий.
  2. Относительно документа – как position:absolute на уровне документа, отсчёт идёт от верхнего левого угла документа.
    • мы будем обозначать эти координаты как pageX/pageY .

Когда страница полностью прокручена в самое начало, то верхний левый угол окна совпадает с левым верхним углом документа, при этом обе этих системы координат тоже совпадают. Но если происходит прокрутка, то координаты элементов в контексте окна меняются, так как они двигаются, но в то же время их координаты относительно документа остаются такими же.

На приведённой картинке взята точка в документе и показаны её координаты до прокрутки (слева) и после (справа):

При прокрутке документа:

  • pageY – координата точки относительно документа осталась без изменений, так как отсчёт по-прежнему ведётся от верхней границы документа (сейчас она прокручена наверх).
  • clientY – координата точки относительно окна изменилась (стрелка на рисунке стала короче), так как точка стала ближе к верхней границе окна.

Координаты относительно окна: getBoundingClientRect

Метод elem.getBoundingClientRect() возвращает координаты в контексте окна для минимального по размеру прямоугольника, который заключает в себе элемент elem , в виде объекта встроенного класса DOMRect.

Основные свойства объекта типа DOMRect :

  • x/y – X/Y-координаты начала прямоугольника относительно окна,
  • width/height – ширина/высота прямоугольника (могут быть отрицательными).

Дополнительные, «зависимые», свойства:

  • top/bottom – Y-координата верхней/нижней границы прямоугольника,
  • left/right – X-координата левой/правой границы прямоугольника.

Кликните на кнопку, чтобы увидеть её координаты относительно окна:

Если вы прокрутите страницу, то расположение кнопки в окне поменяется, и, соответственно, её координаты в контексте окна тоже (при вертикальной прокрутке – y/top/bottom ).

Вот картинка с результатами вызова elem.getBoundingClientRect() :

Как вы видите, x/y и width/height уже точно задают прямоугольник. Остальные свойства могут быть легко вычислены на их основе:

  • left = x
  • top = y
  • right = x + width
  • bottom = y + height
  • Координаты могут считаться с десятичной частью, например 10.5 . Это нормально, ведь браузер использует дроби в своих внутренних вычислениях. Мы не обязаны округлять значения при установке style.left/top .
  • Координаты могут быть отрицательными. Например, если страница прокручена так, что элемент elem ушёл вверх за пределы окна, то вызов elem.getBoundingClientRect().top вернёт отрицательное значение.

Зачем вообще нужны зависимые свойства? Для чего существуют top/left , если есть x/y ?

С математической точки зрения, прямоугольник однозначно задаётся начальной точкой (x,y) и вектором направления (width,height) .

Так что дополнительные зависимые свойства существуют лишь для удобства.

Что же касается top/left , то они на самом деле не всегда равны x/y . Технически, значения width/height могут быть отрицательными. Это позволяет задать «направленный» прямоугольник, например, для выделения мышью с отмеченным началом и концом.

То есть, отрицательные значения width/height означают, что прямоугольник «растет» влево-вверх из правого угла.

Вот прямоугольник с отрицательными width и height (например, width=-200 , height=-100 ):

Как вы видите, свойства left/top при этом не равны x/y .

Впрочем, на практике результат вызова elem.getBoundingClientRect() всегда возвращает положительные значения для ширины/высоты. Здесь мы упомянули отрицательные width/height лишь для того, чтобы вы поняли, зачем существуют эти с виду дублирующие свойства.

Internet Explorer и Edge: не поддерживают x/y

Internet Explorer и Edge не поддерживают свойства x/y по историческим причинам.

Таким образом, мы можем либо сделать полифил (добавив соответствующие геттеры в DomRect.prototype ), либо использовать top/left , так как это всегда одно и то же при положительных width/height , в частности – в результате вызова elem.getBoundingClientRect() .

Координаты right/bottom отличаются от одноимённых CSS-свойств

Есть очевидное сходство между координатами относительно окна и CSS position:fixed .

Но в CSS свойство right означает расстояние от правого края, и свойство bottom означает расстояние от нижнего края окна браузера.

Если взглянуть на картинку выше, то видно, что в JavaScript это не так. Все координаты в контексте окна считаются от верхнего левого угла, включая right/bottom .

elementFromPoint(x, y)

Вызов document.elementFromPoint(x, y) возвращает самый глубоко вложенный элемент в окне, находящийся по координатам (x, y) .

let elem = document.elementFromPoint(x, y);

Например, код ниже выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера:

let centerX = document.documentElement.clientWidth / 2; let centerY = document.documentElement.clientHeight / 2; let elem = document.elementFromPoint(centerX, centerY); elem.style.background = "red"; alert(elem.tagName);

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

Для координат за пределами окна метод elementFromPoint возвращает null

Метод document.elementFromPoint(x,y) работает, только если координаты (x,y) относятся к видимой части содержимого окна.

Если любая из координат представляет собой отрицательное число или превышает размеры окна, то возвращается null .

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

let elem = document.elementFromPoint(x, y); // если координаты ведут за пределы окна, то elem = null elem.style.background = ''; // Ошибка!

Применение для fixed позиционирования

Чаще всего нам нужны координаты для позиционирования чего-либо.

Чтобы показать что-то около нужного элемента, мы можем вызвать getBoundingClientRect , чтобы получить его координаты, а затем использовать CSS-свойство position вместе с left/top (или right/bottom ).

Например, функция createMessageUnder(elem, html) ниже показывает сообщение под элементом elem :

let elem = document.getElementById("coords-show-mark"); function createMessageUnder(elem, html) < // создаём элемент, который будет содержать сообщение let message = document.createElement('div'); // для стилей лучше было бы использовать css-класс здесь message.style.cssText = "position:fixed; color: red"; // устанавливаем координаты элементу, не забываем про "px"! let coords = elem.getBoundingClientRect(); message.style.left = coords.left + "px"; message.style.top = coords.bottom + "px"; message.innerHTML = html; return message; >// Использование: // добавим сообщение на страницу на 5 секунд let message = createMessageUnder(elem, 'Hello, world!'); document.body.append(message); setTimeout(() => message.remove(), 5000);

Кликните кнопку, чтобы увидеть пример в действии:

Кнопка с сообщение появится под ней

Код можно изменить, чтобы показывать сообщение слева, справа, снизу, применять к нему CSS-анимации и так далее. Это просто, так как в нашем распоряжении имеются все координаты и размеры элемента.

Но обратите внимание на одну важную деталь: при прокрутке страницы сообщение уплывает от кнопки.

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

Чтобы изменить это, нам нужно использовать другую систему координат, где сообщение позиционировалось бы относительно документа, и свойство position:absolute .

Координаты относительно документа

В такой системе координат отсчёт ведётся от левого верхнего угла документа, не окна.

В CSS координаты относительно окна браузера соответствуют свойству position:fixed , а координаты относительно документа – свойству position:absolute на самом верхнем уровне вложенности.

Мы можем воспользоваться свойствами position:absolute и top/left , чтобы привязать что-нибудь к конкретному месту в документе. При этом прокрутка страницы не имеет значения. Но сначала нужно получить верные координаты.

Не существует стандартного метода, который возвращал бы координаты элемента относительно документа, но мы можем написать его сами.

Две системы координат связаны следующими формулами:

  • pageY = clientY + высота вертикально прокрученной части документа.
  • pageX = clientX + ширина горизонтально прокрученной части документа.

Функция getCoords(elem) берёт координаты в контексте окна с помощью elem.getBoundingClientRect() и добавляет к ним значение соответствующей прокрутки:

// получаем координаты элемента в контексте документа function getCoords(elem) < let box = elem.getBoundingClientRect(); return < top: box.top + window.pageYOffset, right: box.right + window.pageXOffset, bottom: box.bottom + window.pageYOffset, left: box.left + window.pageXOffset >; >

Если бы в примере выше мы использовали её вместе с position:absolute , то при прокрутке сообщение оставалось бы рядом с элементом.

Модифицированная функция createMessageUnder :

function createMessageUnder(elem, html)

Итого

Любая точка на странице имеет координаты:

  1. Относительно окна браузера – elem.getBoundingClientRect() .
  2. Относительно документа – elem.getBoundingClientRect() плюс текущая прокрутка страницы.

Координаты в контексте окна подходят для использования с position:fixed , а координаты относительно документа – для использования с position:absolute .

Каждая из систем координат имеет свои преимущества и недостатки. Иногда будет лучше применить одну, а иногда – другую, как это и происходит с позиционированием в CSS, где мы выбираем между absolute и fixed .

Задачи

Найдите координаты точек относительно окна браузера

важность: 5

В ифрейме ниже располагается документ с зелёным «полем».

Используйте JavaScript, чтобы найти координаты углов, обозначенных стрелками.

В документе уже реализована функциональность, когда при клике на любом месте показываются соответствующие координаты.

Ваш код должен при помощи DOM получить четыре пары координат:

  1. верхний левый, внешний угол (это просто).
  2. нижний правый, внешний угол (тоже просто).
  3. верхний левый, внутренний угол (чуть сложнее).
  4. нижний правый, внутренний угол (есть несколько способов, выберите один).

Координаты, вычисленные вами, должны совпадать с теми, которые возвращаются по клику мыши.

P.S. Код должен работать, если у элемента другие размеры или есть рамка, без привязки к конкретным числам.

Внешние углы

Внешние углы

Координаты внешних углов – это как раз то, что возвращает функция elem.getBoundingClientRect().

Координаты верхнего левого внешнего угла будут в переменной answer1 и нижнего правого – в answer2 :

let coords = elem.getBoundingClientRect(); let answer1 = [coords.left, coords.top]; let answer2 = [coords.right, coords.bottom];

Верхний левый внутренний угол

Верхний левый внутренний угол

Тут значения отличаются на ширину рамки. Надёжный способ получить интересующее значение – это использовать clientLeft/clientTop :

let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];

Нижний правый внутренний угол

Нижний правый внутренний угол

В нашем случае нужно вычесть размеры рамки из внешних координат.

Это может быть сделано с помощью CSS:

let answer4 = [ coords.right - parseInt(getComputedStyle(field).borderRightWidth), coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth) ];

Другим вариантом решения было бы добавление clientWidth/clientHeight к координатам верхнего левого угла. Так даже было бы лучше.

let answer4 = [ coords.left + elem.clientLeft + elem.clientWidth, coords.top + elem.clientTop + elem.clientHeight ];

Покажите заметку рядом с элементом

важность: 5

Создайте функцию positionAt(anchor, position, elem) , которая позиционирует элемент elem в зависимости от значения свойства position рядом с элементом anchor .

Аргумент position – строка с одним из 3 значений:

  • «top» – расположить elem прямо над anchor
  • «right» – расположить elem непосредственно справа от anchor
  • «bottom» – расположить elem прямо под anchor

Она используется внутри функции showNote(anchor, position, html) , которая уже есть в исходном коде задачи. Она создаёт и показывает элемент-«заметку» с текстом html на заданной позиции position рядом с элементом anchor .

В этой задаче нам нужно только аккуратно вычислить координаты. Смотрите код для изучения деталей реализации.

Обратите внимание, что элементы должны уже быть в документе перед чтением offsetHeight и других свойств. Спрятанный ( display:none ) элемент или элемент вне документа не имеют размеров.

Покажите заметку около элемента (абсолютное позиционирование)

важность: 5

Измените код решения предыдущего задания так, чтобы элемент заметки использовал свойство position:absolute вместо position:fixed .

Это предотвратит расхождение элементов при прокрутке страницы.

Используйте решение предыдущего задания для начала. Чтобы проверить решение в условиях с прокруткой, добавьте стиль элементу .

Решение достаточно простое:

  • Используйте position:absolute в CSS вместо position:fixed для элемента с классом .note .
  • Используйте функцию getCoords() из главы Координаты, чтобы получить координаты относительно документа.

Расположите заметку внутри элемента (абсолютное позиционирование)

важность: 5

Усовершенствуйте решение предыдущего задания Покажите заметку около элемента (абсолютное позиционирование): научите функцию positionAt(anchor, position, elem) вставлять elem внутрь anchor .

Новые значения для аргумента position :

  • top-out , right-out , bottom-out – работают так же, как раньше, они вставляют elem сверху/справа/снизу anchor .
  • top-in , right-in , bottom-in – вставляют elem внутрь anchor : приклеивают его к верхнему/правому/нижнему краю.
// показывает заметку поверх цитаты positionAt(blockquote, "top-out", note); // показывает заметку внутри цитаты вблизи верхнего края элемента positionAt(blockquote, "top-in", note);

Метод getBoundingClientRect

Метод getBoundingClientRect содержит объект координат элемента. Координаты рассчитываются относительного видимой части страницы без учета прокрутки (относительно окна). То есть как при свойстве position в значении fixed .

В возвращаемом объекте содержатся свойства: left , top , right , bottom , width , height . Стоит отметить, что эти свойства не имеют ничего общего с CSS свойствами. В них содержатся расстояния до соответствующих сторон элемента. Для left/right — от левой границы видимой области страницы, а для top/bottom — от верхней.

Синтаксис

элемент.getBoundingClientRect();

Пример

Получим координаты элемента:

#elem < width: 100px; height: 100px; border: 1px solid black; >let elem = document.querySelector(‘#elem’); console.log(elem.getBoundingClientRect());

Смотрите также

  • свойство offsetParent ,
    которое содержит родителя с позиционированием
  • свойство offsetTop ,
    которое содержит смещение элемента сверху
  • свойство offsetLeft ,
    которое содержит смещение элемента слева
  • метод elementFromPoint ,
    которое возвращает элемент по координатам

Координаты в документе

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/coordinates.

Система координат относительно страницы или, иначе говоря, относительно документа, начинается в левом-верхнем углу, но не окна, а именно страницы.

И координаты в ней означают позицию по отношению не к окну браузера, а к документу в целом.

Если провести аналогию с CSS, то координаты относительно окна – это position:fixed , а относительно документа – position:absolute (при позиционировании вне других элементов, естественно).

Мы будем называть координаты в ней pageX/pageY .

Они нужны в первую очередь для того, чтобы показывать элемент в определённом месте страницы, а не окна.

Сравнение систем координат

Когда страница не прокручена, точки начала координат относительно окна (clientX,clientY) и документа (pageX,pageY) совпадают:

Например, координаты элемента с надписью «STANDARDS» равны расстоянию от верхней/левой границы окна:

Прокрутим страницу, чтобы элемент был на самом верху:

Посмотрите на рисунок ниже, на нём – та же страница, только прокрученная, и тот же элемент «STANDARDS».

  • Координата clientY изменилась. Она была 175 , а стала 0 , так как элемент находится вверху окна.
  • Координата pageY осталась такой же, так как отсчитывается от левого-верхнего угла документа.

Итак, координаты pageX/pageY не меняются при прокрутке, в отличие от clientX/clientY .

Получение координат

К сожалению, готовой функции для получения координат элемента относительно страницы нет. Но её можно легко написать самим.

Эти две системы координат жёстко связаны: pageY = clientY + текущая вертикальная прокрутка .

Наша функция getCoords(elem) будет брать результат elem.getBoundingClientRect() и прибавлять текущую прокрутку документа.

Результат getCoords : объект с координатами

function getCoords(elem) < // кроме IE8- var box = elem.getBoundingClientRect(); return < top: box.top + pageYOffset, left: box.left + pageXOffset >; >

Если нужно поддерживать более старые IE, то вот альтернативный, самый кросс-браузерный вариант:

function getCoords(elem) < // (1) var box = elem.getBoundingClientRect(); var body = document.body; var docEl = document.documentElement; // (2) var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; // (3) var clientTop = docEl.clientTop || body.clientTop || 0; var clientLeft = docEl.clientLeft || body.clientLeft || 0; // (4) var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; return < top: top, left: left >; >

Разберём что и зачем, по шагам:

  1. Получаем прямоугольник.
  2. Считаем прокрутку страницы. Все браузеры, кроме IE8- поддерживают свойство pageXOffset/pageYOffset . В более старых IE, когда установлен DOCTYPE, прокрутку можно получить из documentElement , ну и наконец если DOCTYPE некорректен – использовать body .
  3. В IE документ может быть смещён относительно левого верхнего угла. Получим это смещение.
  4. Добавим прокрутку к координатам окна и вычтем смещение html/body , чтобы получить координаты нужного нам элемента.

Устаревший метод: offset*

Есть альтернативный способ нахождения координат – это пройти всю цепочку offsetParent от элемента вверх и сложить отступы offsetLeft/offsetTop .

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

Вот функция, реализующая такой подход.

function getOffsetSum(elem) < var top = 0, left = 0; while (elem) < top = top + parseInt(elem.offsetTop); left = left + parseInt(elem.offsetLeft); elem = elem.offsetParent; >return < top: top, left: left >; >

Казалось бы, код нормальный. И он как-то работает, но разные браузеры преподносят «сюрпризы», включая или выключая размер рамок и прокруток из offsetTop/Left , некорректно учитывая позиционирование. В итоге результат не всегда верен. Можно, конечно, разобрать эти проблемы и посчитать действительно аккуратно и правильно этим способом, но зачем? Ведь есть getBoundingClientRect .

Вы можете увидеть разницу между вычислением координат через offset* и getBoundingClientRect на примере.

В прямоугольнике ниже есть 3 вложенных DIV . Все они имеют border , кое-кто из них имеет position/margin/padding .

Кликните по внутреннему (жёлтому) элементу, чтобы увидеть результаты обоих методов: getOffsetSum и getCoords , а также реальные координаты курсора – event.pageX/pageY (мы обсудим их позже в статье Мышь: IE8-, исправление события).

Кликните, чтобы получить координаты getOffsetSum и getCoords
getOffsetSum: значение getOffsetSum()
getCoords: значение getCoords()
mouse: координаты мыши

При клике на любом месте жёлтого блока вы легко увидите разницу между getOffsetSum(elem) и getCoords(elem) .

Для того, чтобы узнать, какой же результат верный, кликните в левом-верхнем углу жёлтого блока, причём обратите внимание – кликать нужно не на жёлтом, а на чёрном, это рамка, она тоже входит в элемент. Будут видны точные координаты мыши, так что вы можете сравнить их с getOffsetSum/getCoords .

Пример клика в правильном месте (обратите внимание на разницу координат):

Именно getCoords всегда возвращает верное значение.

Координаты на экране screenX/screenY

Есть ещё одна система координат, которая используется очень редко, но для полноты картины необходимо её упомянуть.

Координаты относительно экрана screenX/screenY отсчитываются от его левого-верхнего угла. Имеется в виду именно весь экран, а не окно браузера.

Такие координаты могут быть полезны, например, при работе с мобильными устройствами или для открытия нового окна посередине экрана вызовом window.open.

    Размеры экрана хранятся в глобальной переменной screen:

// общая ширина/высота alert( screen.width + ' x ' + screen.height ); // доступная ширина/высота (за вычетом таскбара и т.п.) alert( screen.availWidth + ' x ' + screen.availHeight ); // есть и ряд других свойств screen (см. документацию)
alert( "Браузер находится на " + window.screenX + "," + window.screenY );

Заметим, что общую информацию об экране и браузере получить можно, а вот координаты конкретного элемента на экране – нельзя, нет аналога getBoundingClientRect или иного метода для этого.

Итого

У любой точки в браузере есть координаты:

  1. Относительно окна window – elem.getBoundingClientRect() .
  2. Относительно документа document – добавляем прокрутку, во всех фреймворках есть готовая функция.
  3. Относительно экрана screen – можно узнать координаты браузера, но не элемента.

Иногда в старом коде можно встретить использование offsetTop/Left для подсчёта координат. Это очень старый и неправильный способ, не стоит его использовать.

Координаты будут нужны нам далее, при работе с событиями мыши (координаты клика) и элементами (перемещение).

Задачи

Область видимости для документа

важность: 5

Напишите функцию getDocumentScroll() , которая возвращает объект с информацией о текущей прокрутке и области видимости.

  • top – координата верхней границы видимой части (относительно документа).
  • bottom – координата нижней границы видимой части (относительно документа).
  • height – полная высота документа, включая прокрутку.

В этой задаче учитываем только вертикальную прокрутку: горизонтальная делается аналогично, а нужна сильно реже.

  • top – это pageYOffset .
  • bottom – это pageYOffset плюс высота видимой части documentElement.clientHeight .
  • height – полная высота документа, её вычисление дано в главе Размеры и прокрутка страницы.
function getDocumentScroll() < var scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); return < top: pageYOffset, bottom: pageYOffset + document.documentElement.clientHeight, height: scrollHeight >; >

Разместить заметку внутри элемента

важность: 5

Расширьте предыдущую задачу Покажите заметку около элемента (абсолютное позиционирование): научите функцию positionAt(anchor, position, elem) вставлять elem внутрь anchor .

Новые значения position :

  • top-out , right-out , bottom-out – работают так же, как раньше, то есть вставляют elem над/справа/под anchor .
  • top-in , right-in , bottom-in – вставляют elem внутрь anchor : к верхней границе/правой/нижней.
// покажет note сверху blockquote positionAt(blockquote, "top-out", note); // покажет note сверху-внутри blockquote positionAt(blockquote, "top-in", note);

Координаты

Когда нужно расположить объект в произвольном месте на странице, нужно не перепутать верх и низ.

Время чтения: 6 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Как пишется
  3. Как понять
  4. Смещение относительно окна браузера
  5. Смещение относительно документа
  6. На практике
    1. Егор Огарков советует

    Контрибьюторы:

    Обновлено 12 сентября 2022

    Кратко

    Чтобы перемещать и позиционировать элементы на экране в браузере имеется система координат. Оси координат начинаются в левом верхнем углу экрана и идут вправо для оси x и вниз для оси y.

    Позиционирование с помощью координат может быть относительно окна браузера или относительно отдельного элемента. Всего существует две системы координат: одна начинается от угла HTML-страницы (документа), а вторая от угла окна браузера. С помощью первой можно определять как элемент расположен относительно всей страницы, а с помощью второй – как элемент расположен относительно окна браузера и того что там находится. Объекты события мыши и тач-события содержат координаты места на экране и в документе, где событие произошло: page X / page Y – для документа, client X / client Y – для экрана.

    Координатами элемента является расстояние в пикселях от осей системы координат до его левого верхнего угла. С помощью метода элемента get Bounding Client Rect ( ) можно получить подробные данные о координатах элемента и его размере.

    Как пишется

     document.addEventListener('click', event =>  console.log('Позиция x относительно документа', event.pageX) console.log('Позиция y относительно документа', event.pageY) console.log('Позиция x относительно экрана', event.clientX) console.log('Позиция y относительно экрана', event.clientY)>, false) // const rect = element.getBoundingClientRect() document.addEventListener('click', event =>  console.log('Позиция x относительно документа', event.pageX) console.log('Позиция y относительно документа', event.pageY) console.log('Позиция x относительно экрана', event.clientX) console.log('Позиция y относительно экрана', event.clientY) >, false) // const rect = element.getBoundingClientRect()      

    Как понять

    Система координат в браузере аналогична плоской системе координат из школьной алгебры. Есть две оси: ось y и ось x, на этой плоскости располагаются все элементы сайта. Единственным отличием от классической системы координат является то, что положительное направление оси y в браузере повёрнуто вниз. Это значит, что элементы с положительным значением по оси y будут находиться внизу относительно оси x, а с отрицательным – наверху.

    Позиция элемента задаётся числом пикселей от начала системы координат по соответствующей оси.

    Начало системы координат можно отсчитывать относительно окна браузера, либо относительно всего документа. Когда страница не прокручена, то начала этих осей совпадают в левом верхнем углу окна. Если прокручивать страницу вниз, то соответственно начало координат документа останется таким же, а начало оси координат окна будет смещаться. Такое разделение может быть полезно для разных задач, например можно анимировать элементы, только когда они попадают на экран, считая координаты относительно документа. А можно давать перетаскивать какой-либо элемент, но только в пределах окна браузера.

    На рисунках page X и page Y – оси системы координат относительно документа, а client X и client Y – оси системы координат относительно окна браузера. Соответственно page X Offset и page Y Offset – это смещение относительно всего документа, а client X Offset и client Y Offset – относительно окна. На практике используются очень похожие названия, потому для текущих примеров будем использовать их.

    Ниже схема осей координат, когда страница не прокручена. В таком состоянии оси совпадают, и координаты элементов относительно окна и относительно документа будут совпадать.

    схема когда оси координат совпадают

    Но если прокрутить страницу (например вниз), но ситуация изменится. Начало документа уйдёт наверх, а значит и начало осей координат. Оси координат окна теперь будут начинаться там, где мы остановим прокрутку.

    схема когда оси координат совпадают

    �� Стоит обратить внимание на то, что координаты – это расстояние от осей до его верхнего левого угла. Потому стрелки на схеме начинаются от угла элемента с текстом Button.

    Смещение относительно окна браузера

    В объекте события мыши из полей client X / client Y можно узнать в каком месте относительно системы координат окна произошло событие, например клик.

    Если нужно узнать как элемент расположен относительно окна, то в этом поможет метод get Bounding Client Rect ( ) . Вызов этого метода возвращает объект с полями x , y , top , left , right , bottom , width и height , то есть полная информация о геометрии элемента. В полях x и y содержатся координаты элемента.

    �� Позиционирование относительно окна гораздо проще понять, если посмотреть, как располагается элемент с position : fixed . Элемент с этим свойством будет находиться в окне в одних и те же координатах, вне зависимости от того насколько прокручен документ.

    Смещение относительно документа

    Если нужно получить данные, в каком месте документа произошло событие, то это можно узнать из полей page X / page Y в объекте события.

    Информацию о том, как элемент расположен относительно документа нельзя узнать из какого-то свойства или метода, её необходимо вычислять самостоятельно. Самым простым способом это можно сделать сложив координаты относительно окна из метода get Bounding Client Rect ( ) со смещением самого окна относительно документа. Смещение окна браузера можно узнать из полей window . page X Offset и window . page Y Offset – это число пикселей на которое прокручен документ по горизонтали и вертикали.

     const rect = element.getBoundingClientRect() console.log('Смещение X относительно документа:', rect.x + pageXOffset)console.log('Смещение Y относительно документа:', rect.y + pageYOffset) const rect = element.getBoundingClientRect() console.log('Смещение X относительно документа:', rect.x + pageXOffset) console.log('Смещение Y относительно документа:', rect.y + pageYOffset)      

    �� Позиционирование относительно документа так же можно понять, если посмотреть как располагается элемент с position : absolute . При прокрутке окна этот элемент будет смещаться вместе с ним.

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

    На практике

    Егор Огарков советует

    �� С помощью значения координат можно узнавать какой элемент находится в окне по этим координатам. Метод document . element From Point ( ) возвращает элемент по переданным ему координатам.

     const x = 100const y = 200 const foundElement = document.elementFromPoint(x, y) const x = 100 const y = 200 const foundElement = document.elementFromPoint(x, y)      

    Метод вернёт самый глубоко вложенный элемент в DOM-дереве по этим координатам, который может оказаться не тем, что вам нужен.

    �� Координаты чаще всего используются для создания поведения перетаскивания элементов по экрану. Используя client X / client Y или page X / page Y из события можно менять координаты самого элемента.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *