css.in.ua
Підтримати

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

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

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

Також, підтримуйте нас матеріально.

Підтримати матеріально

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

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

Порада:

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

Порада:

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

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

Синтаксис

element.style.textDecorationColor

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

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

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;

Цей код дозволяє користувачам вибирати колір підкреслення для тексту через HTML випадаючий список (select element). Коли користувач вибирає колір, колір підкреслення тексту оновлюється відповідно. Це забезпечує інтерактивність і персоналізацію досвіду на веб-сторінці, дозволяючи користувачам налаштовувати візуальний аспект контенту на свій смак.

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

Документи

Зв'язок