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

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

Порада

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

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

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

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

Синтаксис

element.style.color

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<input type="text" id="textInput" value="текст для прикладу" placeholder="Введи щось">
<div id="message">Демонстраційний елемент</div>

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

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

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