Как получить ширину элемента в JavaScript: все варианты

Раздел: Веб-разработка -> Работа с размерами

Способы получения ширины элемента в JavaScript

Рекомендуемый универсальный метод - getBoundingClientRect()

Метод Element.getBoundingClientRect() возвращает объект DOMRect с актуальными размерами элемента, включая дробные значения пикселей. Свойство width этого объекта содержит полную ширину элемента (padding + border + content), но без учёта полосы прокрутки, если она есть. Метод не зависит от CSS-свойства box-sizing и подходит для любого элемента.

const element = document.querySelector('.my-element');
const rect = element.getBoundingClientRect();
console.log(rect.width); // например, 250.5

размеры js (получение размеров элементов в js)

Возможные проблемы:

Вызов метода до полной загрузки DOM может вернуть нулевые значения. Решение - использовать DOMContentLoaded или load.
Если элемент скрыт (display: none), размеры будут нулевыми. Проверять видимость элемента.
Значение может меняться при анимациях или прокрутке - для отслеживания используйте ResizeObserver.

Как узнать ширину элемента с учётом границ и отступов?

Используйте offsetWidth. Это свойство возвращает целое число пикселей - полную ширину, включая padding, border и вертикальную полосу прокрутки (если она видна). Не включает margin.

const width = element.offsetWidth;
console.log(width); // 200

Style border width js (стиль border-width в javascript)

Типичная ошибка: ожидание дробных значений. offsetWidth округляется до целого. Для точных дробных значений лучше использовать getBoundingClientRect.

Как получить ширину элемента без учёта границ?

Свойство clientWidth возвращает внутреннюю ширину: padding + контент. Границы (border) и полоса прокрутки не учитываются. Полезно для измерения области содержимого.

const clientWidth = element.clientWidth;
console.log(clientWidth); // 180

Js width (ширина элемента в javascript)

Проблема: если элемент не имеет явно заданной ширины, clientWidth может рассчитываться от родителя. Проверять влияние box-sizing.

Как получить ширину из CSS-стилей (с единицами измерения)?

Метод window.getComputedStyle(element) возвращает объект CSSStyleDeclaration. Свойство width содержит значение в виде строки, например "200px".

const style = window.getComputedStyle(element);
const widthStr = style.width; // "200px"
const width = parseFloat(widthStr); // 200

Ошибка: если ширина не задана явно (например, auto), метод вернёт "auto", а не числовое значение. В таких случаях следует использовать другие методы.

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

Свойство scrollWidth возвращает полную ширину содержимого, включая ту часть, которая скрыта за прокруткой. Отличается от clientWidth наличием скрытого контента.

const scrollWidth = element.scrollWidth;
console.log(scrollWidth); // 400 (если внутреннее содержимое шире контейнера)

Нюанс: scrollWidth может быть больше offsetWidth. Используется для определения переполнения.

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

Пример 1. Динамическое изменение ширины и сравнение методов

Пример

const box = document.getElementById('box');

// Установим ширину через style
box.style.width = '300px';
box.style.padding = '20px';
box.style.border = '10px solid black';

console.log('offsetWidth:', box.offsetWidth);         // 360 (300+20*2+10*2)
console.log('clientWidth:', box.clientWidth);          // 340 (300+20*2)
console.log('getBoundingClientRect:', box.getBoundingClientRect().width); // 360 (точное)
console.log('computedStyle:', parseFloat(window.getComputedStyle(box).width)); // 300 (только width)

offsetWidth: 360
clientWidth: 340
getBoundingClientRect: 360
computedStyle: 300

Пример 2. Отслеживание изменения ширины с помощью ResizeObserver

Пример

const target = document.querySelector('.resizable');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const width = entry.contentBoxSize[0].inlineSize; // ширина содержимого (без границ)
    const borderWidth = entry.borderBoxSize[0].inlineSize; // полная ширина
    console.log(`Ширина содержимого: ${width}px, полная: ${borderWidth}px`);
  }
});
observer.observe(target);
// После изменения размера элемента observer сработает автоматически

Пример 3. Получение ширины всех дочерних элементов

Пример

const parent = document.getElementById('list');
const children = Array.from(parent.children);
const widths = children.map(child => child.getBoundingClientRect().width);
console.log('Ширина дочерних элементов:', widths);

Ширина дочерних элементов: [120, 200, 85.5, 150]

Пример 4. Проверка переполнения элемента

Пример

const container = document.querySelector('.overflow-test');
if (container.scrollWidth > container.clientWidth) {
  console.log('Содержимое шире контейнера, есть горизонтальный скролл');
} else {
  console.log('Переполнения нет');
}

Содержимое шире контейнера, есть горизонтальный скролл

Пример 5. Получение ширины скрытого элемента (предварительное отображение)

Пример

const hiddenEl = document.querySelector('.hidden');
// Временно делаем видимым, но невидимым для пользователя
const oldDisplay = hiddenEl.style.display;
hiddenEl.style.display = 'block';
hiddenEl.style.position = 'absolute';
hiddenEl.style.visibility = 'hidden';
const width = hiddenEl.getBoundingClientRect().width;
hiddenEl.style.display = oldDisplay;
hiddenEl.style.position = '';
hiddenEl.style.visibility = '';
console.log('Ширина скрытого элемента:', width);

Пример 6. Сравнение offsetWidth и scrollWidth для вложенного контента

Пример

const wrapper = document.querySelector('.wrapper');
wrapper.style.width = '200px';
wrapper.innerHTML = '<div style="width:400px;height:50px;background:red"></div>';
console.log('offsetWidth:', wrapper.offsetWidth);   // 200
console.log('scrollWidth:', wrapper.scrollWidth);   // 400 (скрытая часть)
console.log('clientWidth:', wrapper.clientWidth);   // 200

offsetWidth: 200
scrollWidth: 400
clientWidth: 200

Ширина элемента в JavaScript - comments

Js width (javascript)