style.columnSpan — заголовок на всі колонки в JavaScript
Загальний опис
element.style.columnSpan - це властивість CSS, яка визначає, як елемент розподіляється на колонки в багатоколонковому макеті. Ця властивість дозволяє контролювати відображення елемента через всі колонки чи лише в одній.
При використанні element.style.columnSpan, ви можете встановити значення на "all", щоб елемент розтягувався на всі колонки, або на "none", щоб елемент був в одній колонці. Це корисно для створення особливих ефектів дизайну та організації контенту у багатоколонкових розташуваннях.
Наприклад, якщо потрібно, щоб заголовок розтягався на всі колонки для виділення, можна встановити columnSpan на "all":
let header = document.getElementById('myHeader');
header.style.columnSpan = 'all';
З іншого боку, якщо бажаєте, щоб параграф був в одній колонці для посилення виділення тексту, встановіть columnSpan на "none":
let paragraph = document.getElementById('myParagraph');
paragraph.style.columnSpan = 'none';
Використання element.style.columnSpan дозволяє керувати способом, яким елементи розподіляються на колонки, надаючи більше можливостей для створення цікавого та ефективного дизайну ваших багатоколонкових макетів.
- Порада
-
Застосовуйте
element.style.columnSpanразом з анімаціями CSS для створення плавних переходів, коли елемент змінює охоплення колонок. Це може додати динаміки та інтерактивності вашому макету.element.style.transition = "column-span 0.5s ease";Потім змінюйте охоплення колонок за допомогою JavaScript:
автор: Bondelement.addEventListener('mouseover', () => { element.style.columnSpan = "all"; }); element.addEventListener('mouseout', () => { element.style.columnSpan = "none"; }); - Порада
-
Комбінуйте
element.style.columnSpanз іншими властивостями для досягнення складних візуальних ефектів. Наприклад, разом з властивостямиcolumnsтаcolumnRuleможна створювати інтерактивні та естетично привабливі макети.
автор: Bondelement.style.columns = "3 200px"; element.style.columnRule = "1px solid #000"; element.style.columnSpan = "all"; - Порада
-
Використовуйте
element.style.columnSpanдля адаптивного дизайну, змінюючи поведінку елементів залежно від розміру екрану. Наприклад, на вузьких екранах елементи можуть займати всю ширину макету, а на широких екранах – лише одну колонку.
автор: Bondif (window.innerWidth < 600) { element.style.columnSpan = "all"; } else { element.style.columnSpan = "none"; }
Синтаксис
element.style.columnSpanПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 50 | 71 | 9 | 37 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 50 | 50 | 79 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад дозволяє користувачам змінювати кількість колонок та охоплення колонок окремими елементами за допомогою кнопок, надаючи інтерактивний досвід роботи з властивістю element.style.columnSpan.
HTML
<header>
<h2 class="title">element.style.columnSpan</h2>
<p class="description">Керує охопленням колонок елементом в багатоколонковому макеті.</p>
</header>
<main>
<div class="controls">
<button id="spanAll">Зайняти всі колонки</button>
<button id="spanNone">Звільнити колонки</button>
<button id="increaseColumns">Збільшити кількість колонок</button>
<button id="decreaseColumns">Зменшити кількість колонок</button>
</div>
<div class="result" id="multiColumn">
<p id="columnSpanElement">Цей текст буде змінювати своє охоплення колонок при натисканні кнопок.</p>
<p>Додатковий текст для демонстрації багатоколонкового макету. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Додатковий текст для демонстрації багатоколонкового макету. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</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;
}
.controls {
margin-bottom: 15px;
}
.controls button {
margin-right: 10px;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.controls button:hover {
background-color: #0056b3;
}
.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);
column-count: 2;
column-gap: 20px;
}JS
document.getElementById('spanAll').addEventListener('click', function () {
document.getElementById('columnSpanElement').style.columnSpan = 'all';
});
document.getElementById('spanNone').addEventListener('click', function () {
document.getElementById('columnSpanElement').style.columnSpan = 'none';
});
document.getElementById('increaseColumns').addEventListener('click', function () {
const resultElement = document.getElementById('multiColumn');
const currentColumns = parseInt(window.getComputedStyle(resultElement).getPropertyValue('column-count'));
resultElement.style.columnCount = currentColumns + 1;
});
document.getElementById('decreaseColumns').addEventListener('click', function () {
const resultElement = document.getElementById('multiColumn');
const currentColumns = parseInt(window.getComputedStyle(resultElement).getPropertyValue('column-count'));
if (currentColumns > 1) {
resultElement.style.columnCount = currentColumns - 1;
}
});
//# sourceURL=pen.jsУ цьому прикладі, коли важлива інформація потребує особливої уваги, застосування columnSpan на всі колонки дозволяє виділити цей розділ у багатоколонковому макеті, забезпечуючи чітке розмежування та акцентування важливості вмісту.
HTML
<div id="importantSection">Демонстраційний елемент</div>JS
let importantSection = document.getElementById('importantSection');
importantSection.style.columnSpan = 'all';Коментарі
Коментарів ще немає — будьте першим!