Розмір і прокрутка елемента

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

Ми часто потребуємо їх під час переміщення або позиціювання елементів в JavaScript.

Приклад елемента

Як приклад елемента для демонстрації властивостей ми використаємо наведений нижче:

Він має рамки, відступи та прокручування. Повний набір функцій. Тут немає зовнішніх відступів (margins), оскільки вони не є частиною самого елемента, і для них немає спеціальних властивостей.

На малюнку вище показаний найскладніший випадок, коли елемент має смугу прокрутки. Деякі браузери (не всі) резервують місце для нього, беручи його з вмісту (позначеного вище як “content width”).

Таким чином, без смуги прокрутки ширина вмісту становила б 300px , але якщо ширина смуги прокрутки 16px (ширина може відрізнятися залежно від пристрою та браузера), то залишається лише 300 – 16 = 284px , і ми повинні це враховувати. Ось чому приклади з цього розділу надані зі смугою прокрутки. Без неї деякі розрахунки будуть простіші.

Зазвичай на наших ілюстраціях відступи відображаються порожніми, але якщо в елементі забагато тексту і він переповнюється, то браузери показують “випадаючий” текст в області padding-bottom , і це нормально.

Геометрія

Ось ілюстрація з усіма геометричними властивостями:

Значення цих властивостей технічно є числами, але ці числа є “пікселями”, тому це вимірювання у пікселях.

Почнемо досліджувати, починаючи зовні елемента.

offsetParent, offsetLeft/Top

Ці властивості рідко потрібні, але все ж це “найбільш зовнішні” геометричні властивості, тому й почнемо з них.

У властивості offsetParent знаходиться предок елементу, який браузер використовує для обчислення координат під час візуалізації.

Тобто найближчий предок, який задовольняє наступним умовам:

Властивості offsetLeft/offsetTop надають координати x/y відносно верхнього лівого кута offsetParent .

У наведеному нижче прикладі внутрішній має в якості offsetParent , а властивості offsetLeft/offsetTop є зсувами щодо верхнього лівого кута ( 180 ):

 
.