JS властивість CSSStyleDeclaration.columnWidth

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

element.style.columnWidth - це властивість CSS, яка використовується для встановлення ширини колонок у багатоколонковому макеті. Ця властивість дозволяє контролювати ширину кожної колонки окремо, щоб налаштувати розмір контенту у багатоколонковому розташуванні.

При використанні element.style.columnWidth, ви можете встановити ширину колонки у відсотках, пікселях або інших одиницях виміру. Наприклад, якщо ви хочете, щоб кожна колонка була шириною 200 пікселів:

let element = document.getElementById('myElement');
element.style.columnWidth = '200px';

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

Загальні приклади використання element.style.columnWidth допоможуть програмістам ефективно керувати ширинами колонок у багатоколонкових макетах, підвищуючи якість відображення контенту та поліпшуючи користувацький досвід.

правити

Порада

Застосовуйте властивість element.style.columnWidth у поєднанні з медіа-запитами для створення респонсивних багатоколонкових макетів, де ви можете налаштовувати ширину колонок для різних виглядів екрану. Наприклад, для екранів ширини менше 768 пікселів: @media screen and (max-width: 768px) { element.style.columnWidth = '50%'; }.

автор: Bond правити

Порада

Експериментуйте з комбінуванням властивостей element.style.columnCount та element.style.columnWidth для досягнення оптимального розподілу контенту у багатоколонковому макеті. Налаштуйте кількість колонок та їх ширину, щоб забезпечити зручність читання та естетичний вигляд.

автор: Bond правити

Порада

Використовуйте властивість element.style.columnWidth для створення каруселі з колонками, де кожен елемент прокручується горизонтально у відведеній ширині колонки. Це може бути важливо для показу багато контенту у вигляді слайдів без перевантаження сторінки.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.columnWidth

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	50	50	9	11.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	50	50	50	9

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

let element = document.getElementById('myElement');
let contentWidth = element.scrollWidth;
element.style.columnWidth = contentWidth + 'px'; // Встановлення ширини колонки на основі ширини вмісту

<div id="myElement">Демонстраційний елемент</div>

let element = document.getElementById('myElement');
if (window.innerWidth < 768) {
  element.style.columnWidth = '50%'; // Для мобільних пристроїв
} else {
  element.style.columnWidth = '30%'; // Для планшетів та десктопів
}