Java Script підручник | Координати елемента у вікні
- Координати елемента у вікні Доброго дня! У цьому уроці розглянемо таку тему як визначення координат...
- Координати right / bottom відрізняються від CSS-властивостей
- Метод elem.getBoundingClientRect () зсередини
- Метод elementFromPoint (x, y)
- Координати елемента для position: fixed
- підсумки
- завдання
Координати елемента у вікні
Доброго дня! У цьому уроці розглянемо таку тему як визначення координат елементів на сторінці. Адже для того щоб помістити один елемент щодо іншого на сторінці треба знати координати елемента. Система координат в браузері побудована таким чином, що початок координат знаходиться в лівому верхньому кутку, а не в нижньому лівому як ми звикли. Для зручності координати будемо називати як 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.