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 є потужним інструментом для веб-розробників, що дозволяє легко і гнучко створювати багатоколонкові макети. Це сприяє покращенню структури та читабельності контенту, що є важливим для створення сучасних і зручних веб-інтерфейсів.
- Порада
-
Іноді буває корисно змінювати кількість колонок на основі розміру екрану або контейнера. Наприклад, ви можете адаптувати кількість колонок для кращої читабельності на мобільних пристроях. Використовуйте
автор: Bondwindow.innerWidthабоelement.clientWidthразом ізelement.style.columnCountдля динамічного налаштування. - Порада
-
Ще одна цікава техніка - анімація зміни кількості колонок для плавних переходів. Це можна зробити, поєднуючи "element.style.columnCount" з CSS-властивістю
автор: Bondtransition. Наприклад, додаючиelement.style.transition = 'column-count 0.5s';дозволить зробити зміну кількості колонок більш привабливою.
Синтаксис
element.style.columnCountПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 52 | 9 | 37 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 52 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі користувачі можуть динамічно змінювати кількість колонок за допомогою кнопок. Додавання та видалення колонок дозволяє користувачам бачити в реальному часі, як зміни впливають на макет. Це корисно для інтерактивних інтерфейсів, де користувачі можуть налаштовувати вигляд контенту відповідно до своїх потреб і уподобань.
HTML
<div id="interactiveColumns">Демонстраційний елемент</div>
<div id="addColumn">Демонстраційний елемент</div>
<div id="removeColumn">Демонстраційний елемент</div>JS
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;
}
});Цей приклад дозволяє користувачам змінювати кількість колонок через радіо-кнопки або кнопки "Додати колонку" та "Видалити колонку". Це демонструє гнучкість властивості element.style.columnCount для динамічного налаштування багатоколонкових макетів. Користувачі можуть експериментувати з кількістю колонок і бачити зміни в реальному часі, що робить цей приклад зручним для навчання і практики.
HTML
<header>
<h2 class="title">element.style.columnCount</h2>
<p class="description">Встановлює або змінює кількість колонок для багатоколонкового макету елемента.</p>
</header>
<main>
<div class="result">
<div id="textElement">
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>
<label>
<input type="radio" name="columnCount" value="1"> 1 колонка
</label>
<label>
<input type="radio" name="columnCount" value="2"> 2 колонки
</label>
<label>
<input type="radio" name="columnCount" value="3" checked> 3 колонки
</label>
</div>
<button id="addColumnButton">Додати колонку</button>
<button id="removeColumnButton">Видалити колонку</button>
</div>
</main>CSS
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);
}
#textElement {
margin-bottom: 15px;
font-size: 18px;
column-count: 3;
}
button {
margin-right: 10px;
}JS
let textElement = document.getElementById('textElement');
let addColumnButton = document.getElementById('addColumnButton');
let removeColumnButton = document.getElementById('removeColumnButton');
let radioButtons = document.querySelectorAll('input[name="columnCount"]');
radioButtons.forEach(function (radio) {
radio.addEventListener('change', function () {
textElement.style.columnCount = this.value;
});
});
addColumnButton.addEventListener('click', function () {
let currentCount = getComputedStyle(textElement).columnCount;
textElement.style.columnCount = parseInt(currentCount) + 1;
});
removeColumnButton.addEventListener('click', function () {
let currentCount = getComputedStyle(textElement).columnCount;
if (currentCount > 1) {
textElement.style.columnCount = parseInt(currentCount) - 1;
}
});
//# sourceURL=pen.jsЦей приклад показує, як динамічно змінювати кількість колонок в залежності від ширини контейнера. Це особливо корисно для створення адаптивних макетів, які автоматично підлаштовуються під розмір вікна браузера або контейнера, забезпечуючи оптимальне відображення контенту на різних пристроях.
HTML
<div id="dynamicColumns">Демонстраційний елемент</div>JS
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();Коментарі
Коментарів ще немає — будьте першим!