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

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

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

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

let element = document.getElementById('myElement');
element.style.columnRule = '2px solid red';

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

Властивість columnRule складається з трьох частин: товщина, стиль і колір. Ви можете вказувати їх у будь-якому порядку, але всі частини є необхідними для коректного відображення лінії. Наприклад, для створення пунктирної лінії завтовшки 3 пікселі та синього кольору можна використовувати:

let element = document.getElementById('myElement');
element.style.columnRule = '3px dotted blue';

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

let element = document.getElementById('myElement');
element.style.columnCount = '3';
element.style.columnGap = '20px';
element.style.columnRule = '1px solid gray';

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

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

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

element.addEventListener('mouseover', function() {
  element.style.columnRule = '2px dashed green';
});

element.addEventListener('mouseout', function() {
  element.style.columnRule = '2px solid red';
});

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

Для кращої кросбраузерної підтримки та уникнення проблем з відображенням на різних платформах, рекомендується перевіряти сумісність з різними браузерами або використовувати бібліотеки на кшталт Modernizr для перевірки підтримки властивості columnRule. Наприклад:

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

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

Синтаксис

element.style.columnRule

Значення

Return

Переглядачі

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

Приклади

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

let element = document.getElementById('responsiveColumns');

function updateColumnRule() {
  if (window.innerWidth < 600) {
    element.style.columnRule = '1px solid red';
  } else if (window.innerWidth < 900) {
    element.style.columnRule = '2px dotted blue';
  } else {
    element.style.columnRule = '3px dashed green';
  }
}

window.addEventListener('resize', updateColumnRule);
updateColumnRule();

let element = document.getElementById('interactiveColumns');
let styleButton = document.getElementById('changeStyleButton');

styleButton.addEventListener('click', function() {
  let currentStyle = element.style.columnRule;
  if (currentStyle === '2px solid black') {
    element.style.columnRule = '2px dotted red';
  } else if (currentStyle === '2px dotted red') {
    element.style.columnRule = '2px dashed blue';
  } else {
    element.style.columnRule = '2px solid black';
  }
});