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

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

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

Щоб працювати з columnRuleWidth через JavaScript, спочатку необхідно отримати доступ до елемента DOM, який містить багатоколонковий макет. Це можна зробити за допомогою методів, таких як getElementById, querySelector або getElementsByClassName. Наприклад, щоб встановити ширину лінії в 3 пікселі, використовуйте наступний код:

let element = document.getElementById('myElement');
element.style.columnRuleWidth = '3px';

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

columnRuleWidth підтримує різні одиниці вимірювання, такі як пікселі (px), відсотки (%), ем (em), та інші. Наприклад, для встановлення ширини лінії в 0.5 ем використовуйте наступний код:

let element = document.getElementById('myElement');
element.style.columnRuleWidth = '0.5em';

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

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

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

button.addEventListener('click', function() {
  element.style.columnRuleWidth = element.style.columnRuleWidth === '2px' ? '5px' : '2px';
});

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

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

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

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

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

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

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

Синтаксис

element.style.columnRuleWidth

Значення

Return

Переглядачі

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

Приклади

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

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

window.addEventListener('resize', function() {
  if (window.innerWidth < 600) {
    element.style.columnRuleWidth = '1px';
  } else if (window.innerWidth < 1200) {
    element.style.columnRuleWidth = '3px';
  } else {
    element.style.columnRuleWidth = '5px';
  }
});

let element = document.getElementById('content');
let rangeInput = document.getElementById('widthRange');

rangeInput.addEventListener('input', function() {
  element.style.columnRuleWidth = rangeInput.value + 'px';
});