Page 122 - 6108

Метод document.elementFromPoint (x, y) повертає елемент, який
знаходиться на координатах (x, y) щодо вікна.
let elem = document. elementFromPoint (10, 20);

Координати в документі
Система координат щодо сторінки або, інакше кажучи, щодо документа,
починається в лівому-верхньому кутку, але не вікна, а саме сторінки. І
координати в ній означають позицію по відношенню не до вікна браузера, а до
документа в цілому.
Вони потрібні в першу чергу для того, щоб показувати елемент в певному
місці сторінки, а не вікна.
На жаль, готової функції для отримання координат елемента щодо
сторінки немає. Але її можна легко написати самим.
Ці дві системи координат жорстко пов'язані:

pageY = clientY + поточна вертикальна прокрутка.
Отримати значення прокрутки можна через спеціальні властивості
window.pageXOffset/pageYOffset
Наша функція getCoords (elem) буде брати результат
elem.getBoundingClientRect() і додавати поточну прокрутку документа.

Результат getCoords: об'єкт з координатами {left: .., top: ..}
function getCoords(elem) {
let box = elem.getBoundingClientRect();
return {
top: box.top + pageYOffset,
left: box.left + pageXOffset
};
}
3.4.6 Управління стилями елементів

Для роботи зі стильовими властивостями елементів в JavaScript
застосовуються, головним чином, два підходи:
1) зміна властивості style
2) зміна значення атрибута class
Властивість style представляє складний об'єкт для управління стилем і
безпосередньо зіставляється з атрибутом style html-елемента. Цей об'єкт містить
набір властивостей CSS: element.style.propertyCSS. Наприклад,
встановимо колір шрифту:

let body = document.documentElement;
body.style.color = "blue";
В даному випадку назва властивості color збігається з властивістю css.

Однак ряд властивостей css в назвах мають дефіс, наприклад, font-
family. В JavaScript для цих властивостей дефіс не вживається. Тільки перша
буква, яка йде після дефіса, переводиться в верхній регістр:
bosy.style.fontFamily = "Verdana";