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
}

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

Синтаксис

element.style.columnRuleStyle

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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');
});

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;
});