Как получить доступ к размеру элемента?

Размер элемента получают через: `offsetWidth`/`offsetHeight` (с рамками), `clientWidth`/`clientHeight` (без рамок), `getBoundingClientRect()` (точные дробные размеры и позиция), `scrollWidth`/`scrollHeight` (полный контент).

Способы получить размер

getBoundingClientRect() (рекомендуется)

Точные (дробные) размеры и позиция относительно viewport:

const rect = element.getBoundingClientRect();
rect.width;   // ширина (с padding и border, дробная)
rect.height;
rect.top;     // позиция относительно viewport
rect.left;

offsetWidth / offsetHeight

Размер с padding, border и скроллбаром (целые числа):

element.offsetWidth;  // content + padding + border + scrollbar
element.offsetHeight;

clientWidth / clientHeight

Размер с padding, но без border и скроллбара:

element.clientWidth;  // content + padding
element.clientHeight;

scrollWidth / scrollHeight

Полный размер контента, включая невидимую часть при прокрутке:

element.scrollHeight; // вся высота содержимого (для скролла)

Различия

• clientWidth — Content: ✓; Padding: ✓; Border: ✗; Scrollbar: ✗; Дробные: ✗
• offsetWidth — Content: ✓; Padding: ✓; Border: ✓; Scrollbar: ✓; Дробные: ✗
• getBoundingClientRect — Content: ✓; Padding: ✓; Border: ✓; Scrollbar: ✓; Дробные: ✓
• scrollWidth — Content: весь контент; Padding: ✓; Border: ✗; Scrollbar: ✗; Дробные: ✗

Нюансы

Чтение этих свойств вызывает синхронный reflow — не в циклах.

ResizeObserver

Для отслеживания изменения размера:

new ResizeObserver((entries) => {}).observe(element);

Коротко для собеседования

Размер элемента: getBoundingClientRect() (точные дробные размеры + позиция — рекомендуется), offsetWidth/Height (с padding, border, скроллбаром), clientWidth/Height (с padding, без border), scrollWidth/Height (весь контент для скролла). Чтение вызывает reflow (не в циклах). Отслеживание изменений — ResizeObserver.