1. Координати елемента у вікні Доброго дня! У цьому уроці розглянемо таку тему як визначення координат...
2. Координати right / bottom відрізняються від CSS-властивостей
3. Метод elem.getBoundingClientRect () зсередини
4. Метод elementFromPoint (x, y)
5. Координати елемента для position: fixed
6. підсумки
7. завдання

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

Доброго дня! У цьому уроці розглянемо таку тему як визначення координат елементів на сторінці. Адже для того щоб помістити один елемент щодо іншого на сторінці треба знати координати елемента. Система координат в браузері побудована таким чином, що початок координат знаходиться в лівому верхньому кутку, а не в нижньому лівому як ми звикли. Для зручності координати будемо називати як 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 () зсередини

Вся справа в тому, що браузер відображає будь-який вміст, як прямокутники.

Якщо елемент блоковий, як 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.

Наприклад, функція 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.

також читайте