Измерение блока: размеры раскладки и прямоугольник на экране

Назначение

GetBoundingClientRect показывает прямоугольник элемента относительно окна просмотра. Он полезен для диагностики расположения, но не равен всем возможным значениям ширины из CSS.

Как это работает

Возвращённые width и height описывают охватывающий прямоугольник с учётом преобразований. Координаты зависят от прокрутки окна. Для понимания результата отдельно смотрите box-sizing, padding, border и transform.

Пример

const box = document.querySelector("[data-measure]");
if (box) {
  const rect = box.getBoundingClientRect();
  const style = getComputedStyle(box);
  console.table({
    viewportX: rect.x, viewportY: rect.y,
    rectWidth: rect.width, rectHeight: rect.height,
    cssWidth: style.width, boxSizing: style.boxSizing
  });
}

Что должно получиться

На своей странице с элементом data-measure вы увидите экранные размеры и вычисленную CSS-ширину. Код только читает значения. Если элемента нет, таблица не выводится.

Граница применения и частая ошибка

Transform:rotate меняет охватывающий прямоугольник, а не просто исходную CSS-ширину. Дробные значения не обязательно являются ошибкой. Частое чередование записи стилей и чтения размеров способно вызывать лишние расчёты раскладки.

Самостоятельная проверка

Создайте блок с рамкой, padding и известной шириной. Сравните border-box и content-box, затем добавьте scale и прокрутите страницу. Объясните, какие показатели меняются и от какой системы координат они зависят.

Связанные материалы

• Локальная страница
• Повторная проверка
• Консоль