JS властивість Element.clientWidth

Загальний опис

Властивість clientWidth елемента визначає ширину елемента, враховуючи ширину видимої області (viewport) браузера, а також ширину вертикальних прокруток, якщо вони є. Ця властивість особливо корисна при розробці адаптивних інтерфейсів, коли необхідно знати фактичну ширину елемента, яка відображається на екрані.

Для простого використання clientWidth можна використовувати його для визначення розміру контентної області елемента без урахування полос прокрутки та границь. Наприклад, якщо потрібно динамічно змінювати розмір текстового поля вводу залежно від його вмісту, можна використати clientWidth, щоб встановити ширину поля вводу такою, щоб вміст повністю вміщувався без зайвих прокруток.

const inputField = document.getElementById('input');
const inputWidth = inputField.clientWidth;

У складніших випадках clientWidth може бути використаний для вирішення задач розміщення елементів на сторінці. Наприклад, при вирівнюванні блоків в одному ряду, можна використовувати clientWidth для обчислення ширини кожного елемента і динамічно розміщувати їх на сторінці без переповнення чи обрізання.

const container = document.getElementById('container');
const childElements = container.children;
let totalWidth = 0;

for (let i = 0; i < childElements.length; i++) {
    totalWidth += childElements[i].clientWidth;
}

// Додаткові операції з отриманою шириною елементів...

Отже, clientWidth властивість може бути використана для різних завдань, від простого визначення розміру елементів до складніших адаптивних розрахунків веб-інтерфейсів. Вона дозволяє розробникам отримувати точні виміри елементів, що дозволяє створювати більш гнучкі та адаптивні веб-додатки.

Порада:	Пам'ятайте, що значення `clientWidth` може змінюватися під час виконання скрипту в залежності від змін ширини вікна браузера або зміни розмірів елемента. Звертайте увагу на це при розробці динамічних інтерфейсів.
Порада:	Для отримання повної ширини елементу разом з обрамленням та полосами прокрутки, використовуйте `offsetWidth`. Розуміння різниці між `clientWidth` та `offsetWidth` допоможе вам точніше контролювати розміри елементів.
Порада:	Не забувайте, що значення `clientWidth` може бути нецілим числом, оскільки воно відображає реальну ширину в пікселях. Уникайте використання `clientWidth` у випадках, де потрібна точна кількість пікселів, і використовуйте методи обрізання або округлення значень, якщо це необхідно.

Синтаксис

Element.clientWidth

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

Переглядач
	4.4	18	4	1

Переглядач
	-	-

Приклади

У цьому прикладі є прямокутна область з фіксованою висотою та змінною шириною. Користувач може змінювати ширину за допомогою повзунка, і поточне значення ширини в пікселях (clientWidth) відображається під прямокутною областю.

При переміщенні повзунка, JavaScript-код оновлює ширину прямокутної області та відображає нове значення властивості clientWidth. Це дозволяє користувачеві візуально спостерігати зміну ширини прямокутної області та відповідне значення clientWidth.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/xxeVLVV">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використали властивість clientWidth для отримання ширини видимої частини елемента на сторінці. Це корисно, наприклад, при розрахунку розмірів для розміщення елементів у відповідності до розміру видимої області екрану.

// Створюємо змінну із посиланням на елемент DOM.
const element = document.getElementById('exampleElement');

// Отримуємо ширину видимої частини елемента.
const width = element.clientWidth;

// Виводимо отримане значення ширини в консоль.
console.log(`Ширина видимої частини елемента: ${width}px`);

У цьому складнішому прикладі ми використали властивість clientWidth для динамічного змінення ширини елементів, які мають клас "exampleClass". Це може бути корисно, наприклад, при адаптації розміру елементів до ширини їх вмісту або відповідно до розміру екрану користувача.

// Отримуємо всі елементи класу "exampleClass".
const elements = document.getElementsByClassName('exampleClass');

// Перебираємо всі отримані елементи.
Array.from(elements).forEach(element => {
    // Отримуємо ширину видимої частини кожного елемента.
    const width = element.clientWidth;

    // Змінюємо ширину елемента в залежності від його видимої частини.
    if (width < 200) {
        element.style.width = '200px';
    } else {
        element.style.width = `${width}px`;
    }
});

JS довідник

JavaScript

Наповнення JS розділу