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 разом з анімаціями CSS для створення плавних переходів. Наприклад, можна створити ефект поступового збільшення ширини розділової лінії.

element.style.transition = "column-rule-width 0.5s ease";
element.addEventListener('mouseover', () => {
    element.style.columnRuleWidth = "5px";
});
element.addEventListener('mouseout', () => {
    element.style.columnRuleWidth = "1px";
});

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

Порада

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

if (window.innerWidth < 600) {
    element.style.columnRuleWidth = "1px";
} else {
    element.style.columnRuleWidth = "3px";
}

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

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

Синтаксис

element.style.columnRuleWidth

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

<div id="content">Демонстраційний елемент</div>
<input type="number" id="widthRange" value="10">

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

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