Атрибут class тега <strike>
Описание
Атрибут class позволяет назначать один или несколько CSS-классов элементу <strike> для применения стилей и взаимодействия через JavaScript. Тег <strike> создает перечеркнутый текст (устаревший вариант, вместо него рекомендуется использовать <del> или <s>).
<p>
Цена: <strike class="old-price discount">5000 руб.</strike>
<span class="new-price">3990 руб.</span>
</p>
Синтаксис атрибута:
| Формат | Описание | Пример |
|---|---|---|
class="имя-класса" |
Один класс | class="striked" |
class="класс1 класс2" |
Несколько классов | class="old-price discount" |
Особенности работы:
- Позволяет группировать элементы для стилизации
- Дает доступ к элементам через JavaScript (querySelector)
- Поддерживает любое количество классов (разделяются пробелом)
- Чувствителен к регистру (myClass ≠ MyClass)
Пример с CSS и JavaScript:
<style>
.price-old { color: #999; }
.discount { text-decoration: double line-through; }
.highlight { background-color: yellow; }
</style>
<p>
<strike class="price-old discount" id="oldPrice">7500 руб.</strike>
</p>
<script>
document.getElementById('oldPrice').classList.add('highlight');
</script>
Рекомендации:
- Используйте семантические имена классов (не presentation-ориентированные)
- Разделяйте слова в именах дефисами (old-price, не oldPrice)
- Для устаревшего контента лучше использовать
<del>вместо<strike> - Комбинируйте с другими HTML5-атрибутами (data-*)
Ограничения:
- Тег
<strike>устарел в HTML5 - Избыточное количество классов усложняет поддержку
- Глобальная область видимости классов (возможны конфликты)
Альтернативы:
- <del> - для удаленного/устаревшего контента
- <s> - для неактуальной (но не удаленной) информации
- CSS-модули - для изоляции стилей
Примечание: Для сложных проектов рассмотрите возможность использования методологий именования классов (BEM, OOCSS) или CSS-in-JS решений.