Найдите координаты точек относительно окна браузера
В ифрейме ниже располагается документ с зелёным «полем».
Используйте JavaScript, чтобы найти координаты углов, обозначенных стрелками.
В документе уже реализована функциональность, когда при клике на любом месте показываются соответствующие координаты.
Ваш код должен при помощи DOM получить четыре пары координат:
- верхний левый, внешний угол (это просто).
- нижний правый, внешний угол (тоже просто).
- верхний левый, внутренний угол (чуть сложнее).
- нижний правый, внутренний угол (есть несколько способов, выберите один).
Координаты, вычисленные вами, должны совпадать с теми, которые возвращаются по клику мыши.
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
];