JS властивість CSSStyleDeclaration.textDecorationLine
Загальний опис
element.style.textDecorationLine — це властивість у JavaScript, яка використовується для вказання типу лінії оформлення тексту, таких як підкреслення, перекреслення, надкреслення або їх комбінації. Властивість дає можливість візуально модифікувати текст, покращуючи його виразність або вказуючи на зміни у контенті, наприклад, підкреслення для акцентування або перекреслення для показу вилучення інформації.
Ця властивість може приймати одне або декілька значень: underline, overline, line-through, та none. Використання none скасує всі стилі оформлення тексту, які були задані.
Основний приклад встановлення стилю
element.style.textDecorationLine = "underline";
У цьому прикладі текст елемента буде підкреслено, що є типовим вибором для підсвічування важливих фрагментів або для візуального відмінення посилань.
Комбінування стилів
element.style.textDecorationLine = "underline line-through";
Таке встановлення дозволяє одночасно застосувати підкреслення і перекреслення до тексту, що може бути корисним для відображення тексту з особливим значенням або статусом.
Динамічне управління
Динамічна модифікація textDecorationLine може бути виконана через JavaScript залежно від дій користувача або інших програмних умов. Наприклад, можна змінювати стиль оформлення тексту при наведенні курсора:
element.onmouseover = function() {
this.style.textDecorationLine = "overline";
};
element.onmouseout = function() {
this.style.textDecorationLine = "none";
};
Це створює інтерактивний ефект, де текст буде надкреслено при наведенні курсора, що підсилює взаємодію користувача з веб-сторінкою.
| Порада: |
|
| Порада: | Не обмежуйте використання |
| Порада: | Використання |
Синтаксис
element.style.textDecorationLineЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад надає інтерактивні кнопки для користувачів, щоб вони могли застосувати різні стилі декорації до заданого тексту. Таким чином, можна легко демонструвати відмінності між типами декорацій і допомагати користувачам візуально зрозуміти вплив кожної опції на текст. Це дуже корисно для освітніх цілей та для дизайнерів, які бажають досліджувати різні варіанти візуального оформлення тексту.
Цей JavaScript код додає динамічне підкреслення та надкреслення до всіх посилань на сторінці при наведенні курсора миші. Це зроблено для того, щоб зробити посилання більш помітними та привабливими, підкреслюючи їх важливість або особливий статус на веб-сторінці. Коли користувач відводить курсор, оформлення тексту повертається до свого початкового стану.
document.querySelectorAll('a').forEach(link => {
link.onmouseover = () => link.style.textDecorationLine = 'underline overline';
link.onmouseout = () => link.style.textDecorationLine = 'none';
});
Цей код використовується для автоматичного перекреслення тексту, що ідентифікується за унікальним ID, наприклад, для позначення застарілих або недійсних пропозицій на сторінці. Це забезпечує візуальне сприйняття інформації, допомагаючи користувачам швидко ідентифікувати нерелевантний або застарілий контент, що може бути особливо корисним у динамічних середовищах, таких як електронна комерція або новинні портали.
function markTextAsDeleted(id) {
const element = document.getElementById(id);
if (element) {
element.style.textDecorationLine = 'line-through';
}
}
markTextAsDeleted('expiredOffer');