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
}

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

правити

Порада

Якщо ваш макет має адаптивний дизайн, враховуйте зміну ширини колонок при зміні розміру вікна. Можна зробити так, щоб columnRule змінювалася разом із columnGap залежно від розміру екрана:

function adjustColumnRule() {
  let element = document.getElementById('myElement');
  if (window.innerWidth < 600) {
    element.style.columnRule = '1px solid green';
  } else {
    element.style.columnRule = '2px solid blue';
  }
}

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

Це дозволяє зберігати візуальну привабливість і функціональність макету на всіх пристроях.

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

Порада

Ви можете змінювати columnRule динамічно залежно від умов або дій користувача, таких як кліки або наведення курсора. Це додає інтерактивності вашому макету:

let element = document.getElementById('myElement');
element.addEventListener('click', function() {
  element.style.columnRule = '3px dotted red';
});

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

Порада

Уникайте використання занадто товстих або занадто тонких ліній. Товщина лінії впливає на загальний вигляд макету, і занадто товста лінія може відволікати, тоді як занадто тонка може бути непомітною. Оптимально використовувати товщину від 1 до 3 пікселів:

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

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

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

Синтаксис

element.style.columnRule

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

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

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