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

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

element.style.textDecorationStyle — властивість в JavaScript, яка дозволяє визначити стиль лінії для текстових декорацій, таких як підкреслення, перекреслення, та надкреслення. Вона підтримує кілька значень, включаючи solid, double, dotted, dashed, і wavy, що дає можливість стилізувати текст більш творчо і зробити його візуально привабливим.

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

element.style.textDecorationLine = 'underline';
element.style.textDecorationStyle = 'dotted';

Такий код зробить підкреслення тексту пунктирною лінією, що може бути використано для додання додаткового візуального елементу сторінці.

Динамічне управління стилями

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

element.onmouseover = function() {
  this.style.textDecorationStyle = 'wavy';
};
element.onmouseout = function() {
  this.style.textDecorationStyle = 'solid';
};

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

правити

Порада

При використанні element.style.textDecorationStyle зверніть увагу на те, що хвиляста лінія (wavy) може бути особливо корисною для підкреслення тексту, який містить помилки або важливі попередження на формах. Це робить візуальні попередження більш помітними та візуально відрізняє їх від іншого контенту.

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

Порада

textDecorationStyle часто використовується для підкреслення важливості або для додання естетичних відмінностей тексту на веб-сторінках. Наприклад, ви можете використовувати double для офіційних документів, щоб підкреслити законність або офіційний характер тексту. Інше використання включає веб-дизайн, де wavy може бути використаний для інформації про помилки або попередження, роблячи їх більш помітними.

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

Порада

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

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

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

Синтаксис

element.style.textDecorationStyle

Переглядачі

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

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

Переглядач
	57	36	12.1	44	79	—

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

Переглядач
	57	57	36	12.2

Приклади

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

<div class="important">перший елемент important</div>
<div class="important">другий елемент important</div>

document.querySelectorAll('.important').forEach(element => {
    element.addEventListener('mouseover', () => {
        element.style.textDecorationLine = 'underline';
        element.style.textDecorationStyle = 'double';
    });
    element.addEventListener('mouseout', () => {
        element.style.textDecorationLine = 'none';
    });
});

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

function toggleDecorationStyle() {
    const announcement = document.getElementById('announcement');
    setInterval(() => {
        announcement.style.textDecorationStyle = (announcement.style.textDecorationStyle === 'wavy' ? 'solid' : 'wavy');
    }, 1000);
}

toggleDecorationStyle();