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

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

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:

element.addEventListener('mouseover', () => {
    element.style.columnSpan = "all";
});
element.addEventListener('mouseout', () => {
    element.style.columnSpan = "none";
});

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

Порада

Комбінуйте element.style.columnSpan з іншими властивостями для досягнення складних візуальних ефектів. Наприклад, разом з властивостями columns та columnRule можна створювати інтерактивні та естетично привабливі макети.

element.style.columns = "3 200px";
element.style.columnRule = "1px solid #000";
element.style.columnSpan = "all";

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

Порада

Використовуйте element.style.columnSpan для адаптивного дизайну, змінюючи поведінку елементів залежно від розміру екрану. Наприклад, на вузьких екранах елементи можуть займати всю ширину макету, а на широких екранах – лише одну колонку.

if (window.innerWidth < 600) {
    element.style.columnSpan = "all";
} else {
    element.style.columnSpan = "none";
}

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

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

Синтаксис

element.style.columnSpan

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

let importantSection = document.getElementById('importantSection');
importantSection.style.columnSpan = 'all';