css.in.ua
Підтримати

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";
});
Порада:

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

element.style.columns = "3 200px";
element.style.columnRule = "1px solid #000";
element.style.columnSpan = "all";
Порада:

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

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

Синтаксис

element.style.columnSpan

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


Цей приклад дозволяє користувачам змінювати кількість колонок та охоплення колонок окремими елементами за допомогою кнопок, надаючи інтерактивний досвід роботи з властивістю element.style.columnSpan.

У цьому прикладі, коли важлива інформація потребує особливої уваги, застосування columnSpan на всі колонки дозволяє виділити цей розділ у багатоколонковому макеті, забезпечуючи чітке розмежування та акцентування важливості вмісту.

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

Спільнота

Зв'язок