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

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

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

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

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

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

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

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

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

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

element.style.textDecoration – це властивість у JavaScript, яка використовується для отримання або встановлення стилю оформлення тексту елемента. Вона дозволяє керувати підкресленням, перекресленням та надкресленням тексту в HTML-документі. Властивість textDecoration є частиною об'єкта style, який в свою чергу є властивістю будь-якого DOM-елемента.

Для отримання поточного стилю текстового оформлення елемента, можна використовувати наступний код:

var style = element.style.textDecoration;
console.log(style); // Виводить поточне оформлення тексту, наприклад "underline"

Цей код дозволяє зчитати значення, що вже встановлене для елемента, якщо таке є.

Встановлення стилю тексту

Для зміни стилю оформлення тексту елемента можна присвоїти нове значення властивості textDecoration. Наприклад, щоб підкреслити текст, використовується такий код:

element.style.textDecoration = "underline";

Щоб встановити більше одного стилю, можна використовувати роздільник у вигляді пробілу між стилями:

element.style.textDecoration = "underline overline";

Цей код дозволить одночасно підкреслити та надкреслити текст.

Видалення стилю тексту

Для видалення стилю текстового оформлення можна встановити властивість textDecoration у значення "none":

element.style.textDecoration = "none";

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

Порада:

element.style.textDecoration є корисною властивістю при динамічному управлінні стилем тексту на веб-сторінці, особливо коли потрібно зазначити візуальні підказки користувачу. Наприклад, можна використовувати підкреслення для тексту посилань при наведенні курсора миші, що забезпечує кращу видимість і зрозумілість для кінцевих користувачів.
Порада:

Ця властивість ефективна і в контекстах, де текст повинен бути виділений для привернення уваги, наприклад, у випадках знижок або важливих оголошень на сайті.
Порада:

Для динамічного управління стилями використовуйте textDecoration у поєднанні з подіями, такими як mouseover і mouseout. Це дозволяє змінювати оформлення тексту, коли користувач наводить курсор на елемент, що робить інтерактивність сайту вищою. Наприклад: element.onmouseover = () => element.style.textDecoration = "overline"; element.onmouseout = () => element.style.textDecoration = "none";.

Синтаксис

element.style.textDecoration

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


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

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

document.getElementById('specialText').onmouseenter = function() {
    this.style.textDecoration = "underline overline";
};
document.getElementById('specialText').onmouseleave = function() {
    this.style.textDecoration = "none";
};

Цей приклад демонструє зміну стилю тексту при кліку на елемент. Якщо текст елемента вже має стиль 'line-through' (текст перекреслений), то стиль скасовується при наступному кліку. Якщо стиль не застосований, клік по тексту перекреслює його. Це може бути корисним для створення списків завдань, де користувачі можуть відмічати виконані пункти.

document.getElementById('importantText').onclick = function() {
    if (this.style.textDecoration.includes("line-through")) {
        this.style.textDecoration = "none";
    } else {
        this.style.textDecoration = "line-through";
    }
};

Спільнота

Зв'язок