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
}

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

Синтаксис

element.style.columnRuleColor

Значення

Return

Переглядачі

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

Приклади

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

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); // Оновлювати кожну годину

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