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

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

element.style.color - це властивість CSS, яка дозволяє встановлювати або змінювати колір тексту всередині веб-елемента. Значення можуть бути виражені у різних форматах, включаючи іменовані кольори, шістнадцяткові значення, RGB, RGBA, HSL та HSLA.

Для використання властивості color, спочатку потрібно отримати доступ до DOM-елемента за допомогою JavaScript. Це можна зробити за допомогою методів, таких як getElementById, getElementsByClassName або querySelector. Наприклад:

let element = document.getElementById('myElement');
element.style.color = 'blue';

У цьому прикладі текст всередині елемента з ідентифікатором myElement буде змінено на синій колір.

Однією з переваг використання element.style.color є можливість динамічно змінювати кольори тексту на основі певних умов або взаємодії користувача. Наприклад, можна змінювати колір тексту при наведенні миші на елемент:

let element = document.getElementById('hoverElement');
element.addEventListener('mouseover', function() {
  element.style.color = 'red';
});
element.addEventListener('mouseout', function() {
  element.style.color = 'black';
});

У цьому прикладі текст буде змінювати свій колір на червоний при наведенні миші та повертатися до чорного при відведенні миші.

Також можна використовувати умовні вирази для зміни кольору тексту залежно від певних станів або значень. Наприклад, змінювати колір тексту залежно від значення змінної:

let status = 'error';
let element = document.getElementById('statusMessage');

if (status === 'error') {
  element.style.color = 'red';
} else if (status === 'success') {
  element.style.color = 'green';
} else {
  element.style.color = 'black';
}

У цьому прикладі, якщо змінна status дорівнює 'error', текст буде червоним, якщо 'success' – зеленим, і чорним в інших випадках.

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

let parentElement = document.getElementById('parent');
parentElement.style.color = 'purple';

У цьому випадку, всі текстові елементи всередині parent матимуть фіолетовий колір, якщо вони не перекриваються іншими специфічними значеннями кольорів.

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

Порада:

Для динамічного змінення кольору тексту на основі часу доби можна використовувати об'єкт Date. Наприклад, зробіть текст світлішим вранці і темнішим увечері:

let element = document.getElementById('greeting');
let hour = new Date().getHours();

if (hour < 12) {
  element.style.color = 'orange';
} else if (hour < 18) {
  element.style.color = 'blue';
} else {
  element.style.color = 'darkblue';
}

Порада:

Використовуйте властивість color в поєднанні з іншими стилями для створення більш складних ефектів. Наприклад, змінюйте колір тексту разом з його тінню для створення ефекту сяйва:

let element = document.getElementById('glowingText');
element.style.color = 'yellow';
element.style.textShadow = '0 0 10px yellow';

Синтаксис

element.style.color

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад дозволяє користувачам змінювати колір тексту через введення значення кольору або натискання на кнопки з попередньо визначеними кольорами. Це ілюструє гнучкість властивості element.style.color для динамічного управління стилями тексту на веб-сторінці. Користувачі можуть експериментувати з різними кольорами, що робить цей приклад зручним інструментом для навчання та практики.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/YzbLLbr">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

let inputElement = document.getElementById('textInput');
let messageElement = document.getElementById('message');

inputElement.addEventListener('input', function() {
  let textLength = inputElement.value.length;

  if (textLength < 5) {
    messageElement.style.color = 'red';
    messageElement.textContent = 'Text too short';
  } else if (textLength >= 5 && textLength <= 10) {
    messageElement.style.color = 'orange';
    messageElement.textContent = 'Text length is acceptable';
  } else {
    messageElement.style.color = 'green';
    messageElement.textContent = 'Text length is perfect';
  }
});

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

let timeElement = document.getElementById('time');
let colors = ['#FF0000', '#FFA500', '#FFFF00', '#008000', '#0000FF', '#4B0082', '#EE82EE'];
let index = 0;

function changeColor() {
  let hour = new Date().getHours();

  if (hour >= 6 && hour < 12) {
    index = 0; // ранкові кольори
  } else if (hour >= 12 && hour < 18) {
    index = 3; // денні кольори
  } else {
    index = 5; // вечірні та нічні кольори
  }

  timeElement.style.color = colors[index];
  index = (index + 1) % colors.length;

  setTimeout(changeColor, 1000);
}

changeColor();

JS довідник

JavaScript

Наповнення JS розділу