Как создать сайт

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

Здравствуйте!  В этом уроке рассмотрим такую тему как  определение координат элементов на странице.  Ведь для того чтобы поместить один элемент относительно другого на странице надо знать координаты  элемента.  Система координат в браузере построена таким образом, что  начало координат находится в левом верхнем углу, а не в нижнем левом как мы привыкли.  Для удобства координаты будем называть как  clientY/clientX.

координаты элемента на странице

Метод getBoundingClientRect()

Данный метод elem.getBoundingClientRect() будет  возвращать  координаты элемента, под которыми собственно и  понимаются размеры «воображаемого прямоугольника», который как-бы охватывает весь элемент.

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

  • top –  верх,
  • left – лево,
  • right – право,
  • bottom – низ.

Вот пример:

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

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

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

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

Если говорить о  позиционировании элементов при помощи CSS-свойства position, то там также указываются left, right, top, bottom.

Но, согласно CSS свойство right задаёт  соотвественно расстояние от правой границы, а bottom – от нижней.

Но если вы посмотрите  на рисунок выше, то заметите, что в JavaScript это  далеко не так.  Все координаты  здесь отсчитываются слева/сверху.

Метод elem.getBoundingClientRect() изнутри

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

Читайте также  Введение в DOM

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

В общем содержимое элемента может отображаться  или в одном прямоугольнике или в нескольких.

Все прямоугольники можно получить с помощью метода  elem.getClientRects(). А  вот метод elem.getBoundingClientRect()  как раз и возвращает один прямоугольник для всех getClientRects().

Метод elementFromPoint(x, y)

Сей метод  вернет  элемент, который находится на координатах (x, y) относительно окна браузера.

Вот пример:

var elem1 = document.elementFromPoint(x, y);

Например, код представленный ниже выделит и выведет тег у элемента, который сейчас находится в середине окна:

var center1X = document.documentElement.clientWidth / 2;
var center1Y = document.documentElement.clientHeight / 2;
var elem1 = document.elementFromPoint(center1X, center1Y);
elem1.style.background = "red";
alert( elem1.tagName );
elem1.style.background = "";

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

А вот для координат вне окна  элемент elementFromPoint вернет null

Метод document.elementFromPoint(x,y)  будет работать только если координаты (x,y) находятся в пределах окна я думаю это понятно.

Ну а если одна из координат отрицательна или больше чем ширина/высота окна браузера – то метод вернет null.

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

Координаты элемента  для position:fixed

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

В CSS для позиционирования элемента относительно окна мы применяем свойство position:fixed.  И как правило, вместе с  этим свойством  идут и координаты, например left/top.

Читайте также  Объект Node. Как перемещаться по DOM

Например, функция createMessage из примера ниже покажет сообщение под элементом elem:

var elem1 = document.getElementById("coords-show-mark");
function createMessage(el, text) {
  // получаем координаты
  var coords1 = el.getBoundingClientRect();
  // создаем элемент для сообщения
  var message1 = document.createElement('div');
  // стиль лучше задавать классом
  message1.style.cssText = "position:fixed; color: red";
  // к координатам обязательно добавляем "px"!
  message1.style.left = coords1.left + "px";
  message1.style.top = coords1.bottom + "px";
  message1.innerHTML = text;
  return message1;
}
// Использование
// добавить на 5 сек в документ
var message1 = createMessage(el, 'Привет, мир!');
document.body.appendChild(message1);
setTimeout(function() {
  document.body.removeChild(message1);
}, 5000);

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

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

Итоги

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

Метод  elementFromPoint(x,y) — возвращает элемент, который находится в  координатах x,y  относительно страницы браузера.

Задания

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

Вам надо создать функцию position(anch, pos, el), которая  будет позиционировать элемент el, в зависимости от pos, сверху («top»), справа («right») или снизу («bottom») от элемента anch.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

4 + 2 =

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: