Розміри та позиція елемента

Можна брати розміри елементів зі стилів з об'єкта .getComputedStyle, при цьому стиль буде повернено так, як записано в CSS, наприклад, ширина буде включати одиниці величини: "100px", "25%".

Окрім стилів у елементів DOM є ще метрики - числові значення, завжди в пікселях.


				// внутрішні розміри елемента, включаючи паддінги:

				p.clientWidth

				p.clientHeight


				// зовнішні розміри елемента, включаючи бордери:

				p.offsetWidth

				p.offsetHeight

Позиціонування елемента відносно лівого верхнього кута одного з батьків чи сторінки:


				p.offsetParent - батько, від якого рахується позиціонування

				p.offsetTop

				p.offsetLeft

offsetLeft та offsetTop - позиція елемента в пікселях відносно першого не-статичного батька цього елемента, згадайте лекцію про позиціонування елементів в CSS.

Якщо в елемента немає жодного не-статичного батька - offsetLeft та offsetTop видадуть позиціювання елемента відносно всієї сторінки.

Якщо ж у елемента є не-статичні батьки - їх потрібно перебрати і знайти суми всіх оффсетів (алгоритм наведено нижче).


				// якщо елемент має полосу прокрутки, то повний розмір визначається так:

				p.scrollWidth

				p.scrollHeight

				// і на скільки проскролений блок зліва та зверху:

				p.scrollLeft

				p.scrollTop

Завдання

Працюйте з кодом jsFiddle або Codepen.
Знайдіть розміри span, p.
Знайдіть позиціонування span від початку сторінки.
Задайте блокам div релятивне позиціонування і знову знайдіть позиціонування span від початку сторінки.
Знайдіть розмір контенту блока section та на скільки контент проскролений.

Елегантний спосіб перебрати всіх батьків елемента (порівняйте зі звичайним циклом for):


				let tag = document.querySelector(...);

				let x = tag.offsetLeft;

				let y = tag.offsetTop;

				for (let parent = tag.offsetParent; parent; parent = parent.offsetParent) {

				  x += parent.offsetLeft;

				  y += parent.offsetTop;

				}

let parent = tag.offsetParent; - ініціалізація "лічильника";
parent; - умова (якщо батька не буде - матимемо null чи undefinet);
parent = parent.offsetParent - інкремент "лічильника".