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

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

element.style.columnRuleStyle - це властивість CSS, яка визначає стиль лінії, що розділяє колонки у багатоколонковому макеті. Ця властивість дозволяє вибирати з різних стилів ліній, таких як solid (суцільна), dashed (пунктирна), dotted (точкова) та інші, для додання різноманітного вигляду розділювачам колонок.

Для роботи з columnRuleStyle через JavaScript спочатку потрібно отримати доступ до конкретного елемента DOM за допомогою методів, таких як getElementById, querySelector або getElementsByClassName. Після цього можна встановлювати значення цієї властивості, використовуючи властивість style. Наприклад, щоб задати суцільний стиль лінії, код виглядатиме так:

let element = document.getElementById('myElement');
element.style.columnRuleStyle = 'solid';

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

columnRuleStyle підтримує декілька значень: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Наприклад, для встановлення пунктирного стилю лінії використовуйте наступний код:

let element = document.getElementById('myElement');
element.style.columnRuleStyle = 'dashed';

Це дозволяє створити більш легкий, неформальний вигляд розділювачів колонок.

Можна поєднувати columnRuleStyle з іншими властивостями багатоколонкового макету, такими як columnCount, columnGap і columnRuleWidth, щоб створити складніші та більш привабливі макети. Наприклад, для створення трьохколонкового макету з пунктирним розділювачем товщиною 2 пікселі:

let element = document.getElementById('myElement');
element.style.columnCount = '3';
element.style.columnGap = '20px';
element.style.columnRuleWidth = '2px';
element.style.columnRuleStyle = 'dashed';

Цей код створює три колонки з пунктирним розділювачем, що додає естетичної привабливості макету.

Також можна змінювати columnRuleStyle динамічно залежно від дій користувачів або стану сторінки. Наприклад, для зміни стилю лінії при натисканні на кнопку:

let element = document.getElementById('myElement');
let button = document.getElementById('changeStyleButton');

button.addEventListener('click', function() {
  element.style.columnRuleStyle = element.style.columnRuleStyle === 'solid' ? 'dotted' : 'solid';
});

Цей підхід дозволяє додати інтерактивності вашому веб-додатку.

Для збереження кросбраузерної підтримки важливо перевіряти сумісність властивості columnRuleStyle з різними браузерами. Це можна зробити за допомогою бібліотек, таких як Modernizr, або перевіркою специфікацій браузерів:

if (Modernizr.csscolumns) {
  let element = document.getElementById('myElement');
  element.style.columnRuleStyle = 'groove';
} else {
  // Альтернативне рішення для браузерів, що не підтримують columnRuleStyle
}

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

правити

Порада

Не забувайте, що ви можете змінювати стиль розділової лінії під час анімацій. Це додасть вашому макету динаміки. Наприклад, використовуйте setInterval для створення миготливого ефекту.

let toggle = false;
setInterval(() => {
    element.style.columnRuleStyle = toggle ? "dotted" : "solid";
    toggle = !toggle;
}, 500);

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

Порада

Використовуйте element.style.columnRuleStyle разом з іншими властивостями для створення складних візуальних композицій. Наприклад, комбінуйте з columnRuleColor та columnRuleWidth для точного налаштування меж між колонками.

element.style.columnRuleStyle = "groove";
element.style.columnRuleColor = "green";
element.style.columnRuleWidth = "4px";

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

Порада

Створюйте динамічні ефекти, змінюючи стиль лінії за допомогою JavaScript подій. Наприклад, змінюйте стиль розділової лінії при наведенні курсора миші на елемент, щоб привернути увагу користувача.

element.addEventListener('mouseover', () => {
    element.style.columnRuleStyle = "double";
});
element.addEventListener('mouseout', () => {
    element.style.columnRuleStyle = "solid";
});

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

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

Синтаксис

element.style.columnRuleStyle

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="content">Демонстраційний елемент</div>
<button id="themeToggleButton">Перемкнути</button>

let element = document.getElementById('content');
let themeToggleButton = document.getElementById('themeToggleButton');

themeToggleButton.addEventListener('click', function() {
  let currentStyle = element.style.columnRuleStyle;
  element.style.columnRuleStyle = currentStyle === 'solid' ? 'dotted' : 'solid';
  document.body.classList.toggle('dark-theme');
});

<div id="content" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

let element = document.getElementById('content');
let scrollPosition = 0;

window.addEventListener('scroll', function() {
  let newScrollPosition = window.scrollY;
  if (newScrollPosition > scrollPosition + 100) {
    element.style.columnRuleStyle = 'dashed';
  } else if (newScrollPosition < scrollPosition - 100) {
    element.style.columnRuleStyle = 'solid';
  }
  scrollPosition = newScrollPosition;
});