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

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

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

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

let element = document.getElementById('myElement');
element.style.columnRuleColor = 'red';

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

columnRuleColor підтримує всі стандартні формати кольорів, включаючи назви кольорів (red, blue), шістнадцяткові значення (#ff0000, #0000ff), значення RGB (rgb(255, 0, 0), rgb(0, 0, 255)) і значення HSL (hsl(0, 100%, 50%), hsl(240, 100%, 50%)). Наприклад, для встановлення кольору розділювача за допомогою шістнадцяткового значення:

let element = document.getElementById('myElement');
element.style.columnRuleColor = '#ff0000';

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

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

let element = document.getElementById('myElement');
element.style.columnCount = '3';
element.style.columnGap = '20px';
element.style.columnRuleWidth = '2px';
element.style.columnRuleColor = 'blue';

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

Змінювати columnRuleColor можна динамічно залежно від дій користувачів або стану сторінки. Наприклад, можна змінювати колір розділювача при наведенні курсора на елемент:

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

element.addEventListener('mouseover', function() {
  element.style.columnRuleColor = 'green';
});

element.addEventListener('mouseout', function() {
  element.style.columnRuleColor = 'red';
});

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

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

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

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

правити

Порада

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

let element = document.getElementById('myElement');
element.style.columnRuleColor = 'rgba(255, 0, 0, 0.5)'; // напівпрозорий червоний колір

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

Порада

Рекомендується також експериментувати з анімацією кольору розділювача колонок. Наприклад, можна плавно змінювати колір розділювача за допомогою CSS переймань:

let element = document.getElementById('myElement');
element.style.transition = 'column-rule-color 1s ease-in-out';
element.style.columnRuleColor = 'blue';

Це додає додаткову динаміку вашій сторінці.

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

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

Синтаксис

element.style.columnRuleColor

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="content" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

let element = document.getElementById('content');
let colors = ['red', 'green', 'blue', 'purple', 'orange', 'yellow'];
let totalHeight = document.body.scrollHeight - window.innerHeight;

function updateColumnRuleColorOnScroll() {
  let scrollPosition = window.scrollY;
  let colorIndex = Math.floor((scrollPosition / totalHeight) * colors.length);
  element.style.columnRuleColor = colors[colorIndex];
}

window.addEventListener('scroll', updateColumnRuleColorOnScroll);

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

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

function updateColumnRuleColor() {
  let currentHour = new Date().getHours();
  if (currentHour >= 6 && currentHour < 12) {
    element.style.columnRuleColor = 'yellow'; // Ранок
  } else if (currentHour >= 12 && currentHour < 18) {
    element.style.columnRuleColor = 'orange'; // День
  } else if (currentHour >= 18 && currentHour < 21) {
    element.style.columnRuleColor = 'red'; // Вечір
  } else {
    element.style.columnRuleColor = 'blue'; // Ніч
  }
}

updateColumnRuleColor();
setInterval(updateColumnRuleColor, 3600000); // Оновлювати кожну годину