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

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

element.style.textDecorationColor — це CSS властивість в JavaScript, яка використовується для визначення кольору декоративного оформлення тексту, такого як підкреслення, перекреслення або надкреслення. Це дає можливість більш тонкого управління візуальним стилем текстових елементів на веб-сторінці.

Властивість textDecorationColor дозволяє прямо вказати колір для оформлення тексту. Вона застосовується разом з властивістю textDecoration, що визначає тип лінії (наприклад, підкреслення). Використання цієї властивості може бути корисним для підкреслення важливості тексту, використовуючи колір, що відрізняється від основного тексту, щоб привернути увагу користувача.

Встановлення кольору оформлення

element.style.textDecoration = "underline";
element.style.textDecorationColor = "red";

У цьому прикладі текст елемента буде підкреслено червоним кольором. Колір може бути заданий як ім'я кольору, HEX-код, RGB, RGBA, HSL або HSLA значення.

Динамічне змінення кольору

Динамічне управління кольором оформлення може бути реалізоване за допомогою JavaScript, наприклад, змінюючи колір в залежності від дії користувача або іншої логіки на сторінці:

function updateDecorationColor(color) {
  element.style.textDecorationColor = color;
}

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

правити

Порада

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

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

Порада

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

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

Порада

Колір, встановлений за допомогою textDecorationColor, може бути динамічно адаптований на основі взаємодії користувача або інших змін стану у вашому застосунку. Використання JavaScript для зміни цього кольору може викликати увагу до певних текстових елементів на сторінці. Наприклад, зміна кольору при наведенні курсора миші: element.onmouseover = () => { element.style.textDecorationColor = "green"; };

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

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

Синтаксис

element.style.textDecorationColor

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

document.getElementById('colorSelector').addEventListener('change', function() {
    const selectedColor = this.value;
    const textElement = document.getElementById('customText');
    textElement.style.textDecoration = "underline";
    textElement.style.textDecorationColor = selectedColor;
});

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

function updateDecorationColorByTime() {
    const hour = new Date().getHours();
    const element = document.getElementById('greetingText');
    element.style.textDecoration = "underline";
    if (hour < 12) {
        element.style.textDecorationColor = "orange";
    } else if (hour < 18) {
        element.style.textDecorationColor = "blue";
    } else {
        element.style.textDecorationColor = "purple";
    }
}

// Виклик функції при завантаженні сторінки
window.onload = updateDecorationColorByTime;