Вернуться к уроку

Найдите координаты точки в документе

важность: 5

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

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

Для тестирования в документ добавлено удобство: клик в любом месте отображает координаты мыши относительно окна.

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

  1. Левый-верхний угол снаружи, это просто.
  2. Правый-нижний угол снаружи, это тоже просто.
  3. Левый-верхний угол внутри, это чуть сложнее.
  4. Правый-нижний угол внутри, это ещё сложнее, но можно сделать даже несколькими способами.

Они должны совпадать с координатами, которые вы получите кликом по полю.

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

Открыть песочницу для задачи.

Координаты внешних углов

Координаты элемента возвращаются функцией elem.getBoundingClientRect. Она возвращает все координаты относительно окна в виде объекта со свойствами left, top, right, bottom. Некоторые браузеры также добавляют width, height.

Так что координаты верхнего-левого coords1 и правого-нижнего coords4 внешних углов:

var coords = elem.getBoundingClientRect();

var coords1 = [coords.left, coords.top];
var coords2 = [coords.right, coords.bottom];

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

Этот угол отстоит от наружных границ на размер рамки, который доступен через clientLeft/clientTop:

var coords3 = [coords.left + field.clientLeft, coords.top + field.clientTop];

Правый-нижний угол внутри

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

var coords4 = [
  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
]

Можно получить их альтернативным путем, прибавив clientWidth/clientHeight к координатам левого-верхнего внутреннего угла. Получится то же самое, пожалуй даже быстрее и изящнее.

var coords4 = [
  coords.left + elem.clientLeft + elem.clientWidth,
  coords.top + elem.clientTop + elem.clientHeight
]

Открыть решение в песочнице.