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

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

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

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

let element = document.getElementById('myElement');
element.style.columnCount = 3;

У цьому прикладі текст всередині елемента з ідентифікатором myElement буде розбито на три колонки.

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

function updateColumnCount() {
  let element = document.getElementById('responsiveElement');
  if (window.innerWidth < 600) {
    element.style.columnCount = 1;
  } else if (window.innerWidth < 900) {
    element.style.columnCount = 2;
  } else {
    element.style.columnCount = 3;
  }
}

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

Цей приклад показує, як адаптувати кількість колонок відповідно до ширини вікна. Це дозволяє забезпечити оптимальне відображення контенту на різних пристроях, таких як смартфони, планшети і настільні комп'ютери.

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

let article = document.getElementById('newsArticle');
article.style.columnCount = 4;

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

Важливо пам'ятати, що властивість columnCount працює разом з іншими властивостями багатоколонкового макету, такими як columnGap (відстань між колонками) і columnRule (лінія між колонками). Це дозволяє налаштовувати вигляд колонок більш детально:

element.style.columnCount = 3;
element.style.columnGap = '20px';
element.style.columnRule = '1px solid black';

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

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

правити

Порада

Іноді буває корисно змінювати кількість колонок на основі розміру екрану або контейнера. Наприклад, ви можете адаптувати кількість колонок для кращої читабельності на мобільних пристроях. Використовуйте window.innerWidth або element.clientWidth разом із element.style.columnCount для динамічного налаштування.

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

Порада

Ще одна цікава техніка - анімація зміни кількості колонок для плавних переходів. Це можна зробити, поєднуючи "element.style.columnCount" з CSS-властивістю transition. Наприклад, додаючи element.style.transition = 'column-count 0.5s'; дозволить зробити зміну кількості колонок більш привабливою.

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

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

Синтаксис

element.style.columnCount

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let container = document.getElementById('interactiveColumns');
let addButton = document.getElementById('addColumn');
let removeButton = document.getElementById('removeColumn');

addButton.addEventListener('click', function() {
  let currentCount = getComputedStyle(container).columnCount;
  container.style.columnCount = parseInt(currentCount) + 1;
});

removeButton.addEventListener('click', function() {
  let currentCount = getComputedStyle(container).columnCount;
  if (currentCount > 1) {
    container.style.columnCount = parseInt(currentCount) - 1;
  }
});

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

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

function adjustColumnCount() {
  let containerWidth = container.offsetWidth;

  if (containerWidth < 400) {
    container.style.columnCount = 1;
  } else if (containerWidth < 800) {
    container.style.columnCount = 2;
  } else {
    container.style.columnCount = 3;
  }
}

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