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

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

element.style.columnFill - це властивість CSS, яка визначає, як вміст розподіляється між колонками багатоколонкового макету. Вона може мати значення balance, що означає рівномірний розподіл вмісту між колонками, або auto, що дозволяє заповнювати колонки послідовно.

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

Для використання columnFill в JavaScript спочатку потрібно отримати доступ до DOM-елемента за допомогою одного з методів, таких як getElementById, getElementsByClassName або querySelector. Після цього можна встановити значення columnFill:

let element = document.getElementById('myElement');
element.style.columnFill = 'balance';

Цей приклад встановлює, що вміст елемента myElement буде рівномірно розподілений між колонками.

З іншого боку, якщо ви хочете, щоб колонки заповнювалися послідовно, ви можете встановити значення columnFill на auto:

let element = document.getElementById('myElement');
element.style.columnFill = 'auto';

Це означає, що вміст буде заповнювати одну колонку повністю перед початком заповнення наступної.

Використання columnFill разом з іншими властивостями багатоколонкового макету, такими як columnCount та columnGap, може допомогти створити більш складні та привабливі макети. Наприклад, ви можете поєднати ці властивості для створення адаптивного дизайну:

let element = document.getElementById('myElement');
element.style.columnCount = 3;
element.style.columnGap = '20px';
element.style.columnFill = 'balance';

Цей приклад створює трьохколонковий макет з відстанню між колонками у 20 пікселів та рівномірним розподілом вмісту.

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

function adjustColumnFill() {
  let element = document.getElementById('content');
  if (window.innerWidth < 600) {
    element.style.columnFill = 'auto';
  } else {
    element.style.columnFill = 'balance';
  }
}

window.addEventListener('resize', adjustColumnFill);
adjustColumnFill();

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

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

правити

Порада

Використовуйте JavaScript для динамічного зміни значення columnFill на основі контенту. Наприклад, якщо ви маєте динамічний контент, ви можете перевірити висоту колонок і змінити columnFill, щоб уникнути значних різниць у висоті між колонками:

function adjustColumnFill(element) {
    const columns = element.querySelectorAll('.column');
    const heights = Array.from(columns).map(col => col.offsetHeight);
    const maxHeight = Math.max(...heights);
    const minHeight = Math.min(...heights);

    if (maxHeight - minHeight > 100) {
        element.style.columnFill = 'auto';
    } else {
        element.style.columnFill = 'balance';
    }
}

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

Порада

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

element.style.columnFill = 'auto';

Ви також можете додати додаткові атрибути для доступності:

<div role="presentation" aria-label="multi-column content" style="column-count: 3; column-fill: auto;">
    <!-- Контент тут -->
</div>

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

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

Синтаксис

element.style.columnFill

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let container = document.getElementById('dynamicContent');

function adjustColumnFill() {
  if (window.innerWidth < 800) {
    container.style.columnFill = 'auto';
  } else {
    container.style.columnFill = 'balance';
  }
}

window.addEventListener('resize', adjustColumnFill);
adjustColumnFill();

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

let article = document.getElementById('newsArticle');
let toggleButton = document.getElementById('toggleFill');

toggleButton.addEventListener('click', function() {
  if (article.style.columnFill === 'balance') {
    article.style.columnFill = 'auto';
  } else {
    article.style.columnFill = 'balance';
  }
});