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

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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

element.style.textDecorationLine

Переглядачі

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

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

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

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

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

Приклади

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

<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

document.querySelectorAll('a').forEach(link => {
  link.onmouseover = () => link.style.textDecorationLine = 'underline overline';
  link.onmouseout = () => link.style.textDecorationLine = 'none';
});

function markTextAsDeleted(id) {
  const element = document.getElementById(id);
  if (element) {
    element.style.textDecorationLine = 'line-through';
  }
}
markTextAsDeleted('expiredOffer');

<header>
  <h2 class="title">element.style.textDecorationLine</h2>
  <p class="description">Встановлює або змінює тип декоративного оформлення тексту.</p>
</header>
<main>
  <div class="result">
    <p id="textExample">Досліджуйте стиль декорації тексту!</p>
    <button onclick="setTextDecoration('underline')">Підкреслити</button>
    <button onclick="setTextDecoration('line-through')">Перекреслити</button>
    <button onclick="setTextDecoration('overline')">Надкреслити</button>
    <button onclick="setTextDecoration('none')">Очистити стиль</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin: 10px;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

function setTextDecoration(decoration) {
  var textElement = document.getElementById('textExample');
  textElement.style.textDecorationLine = decoration;
}
//# sourceURL=pen.js