Атрибут data-* тега <i>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в теге <i>, которая может быть использована JavaScript и CSS. Это особенно полезно для иконок и декоративных элементов.
<i class="icon" data-icon-type="user" data-toggle="tooltip"></i>
<i data-action="show-modal" data-target="#infoModal">ℹ️</i>
Типичные сценарии применения:
| Атрибут | Пример | Назначение |
|---|---|---|
| data-icon-type | data-icon-type="search" |
Определение типа иконки |
| data-toggle | data-toggle="tooltip" |
Активация всплывающих подсказок |
| data-action | data-action="open-modal" |
Указание действия при клике |
Доступ из JavaScript:
<i id="infoIcon" data-info-id="42" data-category="help">ℹ️</i>
<script>
const icon = document.getElementById('infoIcon');
console.log(icon.dataset.infoId); // "42"
console.log(icon.dataset.category); // "help"
// Изменение данных
icon.dataset.lastClicked = new Date().toISOString();
</script>
Использование в CSS:
<style>
i[data-icon-type="warning"] {
color: #f39c12;
}
i[data-status="active"]::after {
content: " (активно)";
font-size: 0.8em;
}
</style>
<i data-icon-type="warning">⚠️</i>
<i data-status="active">Профиль</i>
Рекомендации по именованию:
- Используйте kebab-case (дефисы вместо подчеркиваний)
- Выбирайте осмысленные имена, отражающие назначение
- Избегайте слишком общих названий (
data-value) - Для сложных данных используйте JSON в одном атрибуте
Пример с JSON данными:
<i class="user-icon" data-user='{"id":42,"name":"John","role":"admin"}'></i>
<script>
const userIcon = document.querySelector('.user-icon');
const userData = JSON.parse(userIcon.dataset.user);
console.log(userData.name); // "John"
</script>
Ограничения:
- Значения всегда строковые (требуют преобразования)
- Не предназначены для хранения больших объемов данных
- Не влияют на отображение без дополнительного CSS/JS
Примечание: Хотя <i> часто используется для иконок и декоративных элементов, data-атрибуты добавляют ему семантическую нагрузку и функциональность. Для сложных интерактивных элементов рассмотрите использование <button> с соответствующими ARIA-атрибутами.