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

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

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

Для використання element.style.columns у JavaScript, спочатку отримайте доступ до відповідного елемента DOM. Наприклад, якщо вам потрібно розділити div на три колонки, то встановіть значення columnCount на 3:

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

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

let paragraph = document.getElementById('myParagraph');
paragraph.style.columns = '2';

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

element.style.columnGap = '20px';

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

правити

Порада

Комбінуйте element.style.columns з анімаціями для створення плавних переходів між різною кількістю колонок. Це може зробити ваш макет більш інтерактивним та привабливим. Використовуйте CSS для анімацій:

element.style.transition = "all 0.5s ease";

А потім змінюйте колонки за допомогою JavaScript:

element.addEventListener('mouseover', () => {
    element.style.columns = "3 150px";
});
element.addEventListener('mouseout', () => {
    element.style.columns = "2 200px";
});

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

Порада

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

element.style.columns = "auto 250px";

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

Порада

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

@media (max-width: 600px) {
    element.style.columns = "1";
}
@media (min-width: 601px) {
    element.style.columns = "3 200px";
}

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

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

Синтаксис

element.style.columns

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let element = document.getElementById('content');

window.addEventListener('resize', function() {
  if (window.innerWidth < 768) {
    element.style.columnCount = 1;
  } else {
    element.style.columnCount = 3;
  }
});

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

let paragraph = document.getElementById('myParagraph');

paragraph.style.columns = '2';
paragraph.style.columnGap = '30px';
paragraph.style.columnRule = '2px dashed #333';