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

<header>
  <h2 class="title">element.style.textDecorationStyle</h2>
  <p class="description">Змінює стиль лінії декорації тексту.</p>
</header>
<main>
  <div class="result">
    <p id="sampleText">Демонстраційний текст з різними стилями декорації.</p>
    <select id="styleSelector">
      <option value="solid">Суцільний</option>
      <option value="double">Подвійний</option>
      <option value="dotted">Крапковий</option>
      <option value="dashed">Пунктирний</option>
      <option value="wavy">Хвилястий</option>
    </select>
    <button onclick="applyStyle()">Застосувати стиль</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, select {
  margin-top: 10px;
  font-size: 16px;
  padding: 8px;
}

function applyStyle() {
  var textElement = document.getElementById('sampleText');
  var style = document.getElementById('styleSelector').value;
  textElement.style.textDecorationLine = 'underline'; // Ensure some decoration is applied
  textElement.style.textDecorationStyle = style;
}
//# sourceURL=pen.js

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

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

toggleDecorationStyle();