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

Переглядачі

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

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

Переглядач
	50	52	9	11.1	12	10

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

Переглядач
	50	50	52	9

Приклади

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

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

<header>
  <h2 class="title">element.style.columnRule</h2>
  <p class="description">Встановлює стиль, товщину та колір лінії між колонками у багатоколонковому макеті.</p>
</header>
<main>
  <div class="result">
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
    </div>
    <div class="controls">
      <label for="thickness">Товщина (px):</label>
      <input type="number" id="thickness" value="2" min="1" max="10"><br>
      <label for="style">Стиль лінії:</label>
      <select id="style">
        <option value="solid">Solid</option>
        <option value="dashed">Dashed</option>
        <option value="dotted">Dotted</option>
      </select><br>
      <label for="color">Колір:</label>
      <input type="color" id="color" value="#ff0000"><br>
      <button id="apply">Застосувати</button>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#content {
  column-count: 3;
  column-gap: 20px;
  column-rule: 2px solid red;
  margin-bottom: 15px;
}

.controls label, .controls input, .controls select, .controls button {
  display: block;
  margin-bottom: 10px;
}

document.getElementById('apply').addEventListener('click', function () {
  let thickness = document.getElementById('thickness').value + 'px';
  let style = document.getElementById('style').value;
  let color = document.getElementById('color').value;
  let columnRule = `${thickness} ${style} ${color}`;

  let content = document.getElementById('content');
  content.style.columnRule = columnRule;
});
//# sourceURL=pen.js

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