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

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

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

Синтаксис

element.style.textDecorationStyle

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/GRbrxXG">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

toggleDecorationStyle();

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

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

JS довідник

JavaScript

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