Измеряем и задаём размеры элементов с помощью JavaScript

Расширенные примеры измерения и установки размеров

Пример 1. Измерение размеров элемента после трансформации (scale, rotate)

Метод getBoundingClientRect возвращает фактический размер, отображённый на экране, в то время как offsetWidth показывает размер до трансформации (исходный).

const transformed = document.createElement('div');
transformed.style.width = '200px';
transformed.style.height = '100px';
transformed.style.transform = 'scale(1.5)';
document.body.appendChild(transformed);

console.log('offsetWidth:', transformed.offsetWidth);      // 200
console.log('getBoundingClientRect:', transformed.getBoundingClientRect().width); // 300

offsetWidth: 200
getBoundingClientRect: 300

Пример 2. Работа с процентными размерами - получение пиксельного значения

Если ширина задана в процентах, element.style.width вернёт строку '50%'. Для получения актуальных пикселей используем getComputedStyle.

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
console.log('Style width:', child.style.width);              // '50%'
console.log('Computed width:', getComputedStyle(child).width); // '320px'

Пример 3. Установка размеров с учётом box-sizing: border-box

При border-box свойство width включает padding и border. Если нужно установить ширину только содержимого, необходимо вычесть padding и border.

const box = document.getElementById('mybox');
const style = getComputedStyle(box);
const border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
const contentWidth = box.clientWidth - padding - border;
box.style.width = (contentWidth + 50) + 'px'; // увеличиваем содержимое на 50px

Пример 4. Определение размеров скрытого элемента (display: none) с помощью виртуального замера

Создаём временный контейнер, копируем стили, измеряем.

function getHiddenSize(element) {
  const clone = element.cloneNode(true);
  clone.style.cssText = 'position:absolute;visibility:hidden;display:block;';
  document.body.appendChild(clone);
  const size = { width: clone.offsetWidth, height: clone.offsetHeight };
  document.body.removeChild(clone);
  return size;
}

const hiddenEl = document.getElementById('hiddenDiv');
console.log(getHiddenSize(hiddenEl)); // {width: 400, height: 150}

Пример 5. Отслеживание изменения размеров через ResizeObserver

Современный способ реагировать на изменения размеров элемента без привязки к window.resize.

const target = document.querySelector('.resizable');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Размер изменился: ${Math.round(width)}px x ${Math.round(height)}px`);
  }
});
observer.observe(target);

Пример 6. Получение размеров изображения до его полной загрузки

Использование naturalWidth и naturalHeight даёт оригинальные размеры, даже если CSS сжимает изображение.

const img = new Image();
img.src = 'large-photo.jpg';
img.onload = () => {
  console.log('Natural:', img.naturalWidth, img.naturalHeight);
  console.log('Style:', img.offsetWidth, img.offsetHeight); // возможно меньше
}

Пример 7. Установка размеров с использованием CSS-переменных (custom properties)

Можно динамически менять значения переменных, что меняет размеры элементов, использующих эти переменные.

document.documentElement.style.setProperty('--box-width', '300px');
document.documentElement.style.setProperty('--box-height', '150px');
// Если в CSS: .box { width: var(--box-width); height: var(--box-height); }
// Размеры обновятся без прямого обращения к свойству style элемента.

Пример 8. Измерение размеров SVG-элементов

Для SVG элементы имеют методы getBBox(), возвращающий bounding box в координатах SVG.

const svgRect = document.querySelector('rect');
const bbox = svgRect.getBBox();
console.log(`SVG Rect: ${bbox.width} x ${bbox.height}`);