Знайти координати поля відносно вікна
У iframe нижче ви можете побачити документ із зеленим «полем».
Використовуючи 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
];