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 є корисною властивістю при динамічному управлінні стилем тексту на веб-сторінці, особливо коли потрібно зазначити візуальні підказки користувачу. Наприклад, можна використовувати підкреслення для тексту посилань при наведенні курсора миші, що забезпечує кращу видимість і зрозумілість для кінцевих користувачів.

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.textDecoration

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

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

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