Изменение и получение ширины элементов с помощью style.width в JS

Расширенные примеры работы с шириной

Пример 1: Получение вычисленной ширины и преобразование в число

Часто требуется выполнить математические операции на основе вычисленной ширины. Используйте parseFloat для преобразования строки в число.

const box = document.getElementById('example');
// Предположим, в CSS ширина задана как '150px'
const compWidth = getComputedStyle(box).width; // '150px'
const numericWidth = parseFloat(compWidth);   // 150
console.log('Вычисленная ширина в пикселях:', numericWidth);
// Теперь можно изменить: увеличить на 20%
box.style.width = (numericWidth * 1.2) + 'px';

Вычисленная ширина в пикселях: 150

Этот подход полезен при динамическом изменении размера с сохранением пропорций.

Пример 2: Установка ширины с учётом box-sizing

При box-sizing: border-box указанная ширина включает padding и border. Если нужно установить именно контентную часть, требуется вычесть их.

const element = document.getElementById('bordered-box');
// CSS: box-sizing: border-box; width: 200px; padding: 10px; border: 5px;
// Текущая контентная ширина: 200 - 2*10 - 2*5 = 170px
// Чтобы установить контентную ширину 180px, нужно:
const targetContentWidth = 180;
const borderWidth = element.offsetWidth - element.clientWidth; // 10px (2*5)
const padding = element.clientWidth - element.getBoundingClientRect().width; // не совсем, проще через CSS вычислять
style.width = (targetContentWidth + padding + borderWidth) + 'px'; // 180 + 20 + 10 = 210px
console.log('Новый offsetWidth:', element.offsetWidth); // 210px

Новый offsetWidth: 210

Ошибка: если padding задан в процентах или em, точное вычисление усложняется. В таких случаях проще читать getComputedStyle и использовать box-sizing: content-box для прямой установки контентной ширины.

Пример 3: Синхронизация ширины двух элементов

Необходимо, чтобы ширина второго элемента равнялась ширине первого.

const source = document.getElementById('source');
const target = document.getElementById('target');
// В момент изменения (например, при resize окна)
function syncWidth() {
  const srcWidth = getComputedStyle(source).width;
  target.style.width = srcWidth;
}
// При этом можно добавить debounce, чтобы не вызывать слишком часто
window.addEventListener('resize', syncWidth);
syncWidth(); // начальная синхронизация

Результат: ширина target всегда равна ширине source, включая единицы измерения.

Пример 4: Использование ResizeObserver для отслеживания изменений ширины

Современный способ реагировать на изменение размера элемента - ResizeObserver. Он позволяет получать точные размеры в пикселях.

const observedElement = document.getElementById('resizable');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width } = entry.contentRect;
    console.log('Новая ширина (content box):', width);
    // Можно, например, обновить другой элемент
    document.getElementById('output').textContent = width.toFixed(0) + 'px';
  }
});
observer.observe(observedElement);

Новая ширина (content box): 320

Этот метод эффективнее, чем подписка на resize окна, так как наблюдает именно за элементом.

Пример 5: Установка ширины с помощью CSS custom properties

Можно комбинировать style.width с CSS-переменными для более гибкого управления.

// Задаём CSS-переменную на корневом элементе
const root = document.documentElement;
root.style.setProperty('--main-width', '300px');
// Теперь любой элемент, использующий эту переменную, получит 300px
const child = document.querySelector('.child');
child.style.width = 'var(--main-width)';

Результат: ширина child становится равной 300px, а если позже изменить переменную, все элементы, ссылающиеся на неё, обновятся автоматически (через CSS).