Атрибут style тега <del>

Описание

Атрибут style позволяет задавать CSS-стили непосредственно для элемента <del>. Эти стили применяются только к конкретному элементу с удалённым текстом и имеют наивысший приоритет (кроме стилей с !important).

Пример использования:
<p> Цена изменена: <del style="color: #999; text-decoration: line-through; background-color: #fff0f0;"> $199.99 </del> <ins style="color: #2a7; font-weight: bold;">$149.99</ins> </p>

Рекомендуемые стили для удалённого текста:

Свойство Пример Рекомендация
text-decoration line-through Сохраняйте зачёркивание как основной индикатор
color #999, #d33 Используйте приглушённые цвета
background-color #fff0f0 Лёгкий фон для выделения
opacity 0.7 Для визуального "потускнения"

Динамическое изменение стилей:

<p> <del id="dynamic-del" style="color: #999;">Старая версия текста</del> </p> <button onclick="highlightDeletion()">Подсветить удаление</button> <script> function highlightDeletion() { const del = document.getElementById('dynamic-del'); del.style.backgroundColor = '#ffecec'; del.style.padding = '2px 5px'; del.style.borderLeft = '2px solid #d33'; } </script>

Лучшие практики:

  • Используйте для разовых стилевых правок
  • Для сложного оформления выносите стили в CSS-классы
  • Сохраняйте семантическое значение тега (зачёркивание)
  • Избегайте inline-стилей для важных элементов дизайна
  • Тестируйте контрастность для доступности

Ограничения:

  • Не поддерживает псевдоклассы (:hover, :focus)
  • Нет возможности использовать медиа-запросы
  • Усложняет поддержку кода
  • Увеличивает размер HTML-документа

Примечание: Хотя inline-стили удобны для быстрых правок, в production-среде рекомендуется выносить стили во внешние CSS-файлы. Это особенно важно для элементов <del>, которые часто требуют единообразного оформления по всему сайту.