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

Переглядачі

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

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

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

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

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

Приклади

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

<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';

<header>
  <h2 class="title">element.style.columns</h2>
  <p class="description">Визначає кількість колонок для розподілу контенту.</p>
</header>
<main>
  <div class="result">
    <form id="columnForm">
      <label for="columnSelect">Виберіть кількість колонок:</label>
      <select id="columnSelect">
        <option value="1">1 колонка</option>
        <option value="2">2 колонки</option>
        <option value="3">3 колонки</option>
        <option value="4">4 колонки</option>
        <option value="5">5 колонок</option>
      </select>
    </form>
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

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

columnForm.addEventListener('change', function () {
  let selectedColumns = document.getElementById('columnSelect').value;
  content.style.columns = selectedColumns;
});
//# sourceURL=pen.js