Атрибут data-* тега <b>
Описание
Пользовательские атрибуты data-* позволяют хранить дополнительную информацию в теге <b> для использования в JavaScript и CSS. Эти атрибуты особенно полезны для:
- Хранения метаданных о выделенном тексте
- Интеграции с JavaScript-фреймворками
- Кастомизации поведения элементов
<p>
В этом предложении <b data-importance="high" data-category="terminology">ключевой термин</b> выделен жирным.
</p>
Основные возможности:
| Применение | Пример | Преимущества |
|---|---|---|
| Хранение метаданных | data-id="term-42" |
Семантическая разметка |
| CSS-селекторы | [data-importance="high"] |
Таргетированная стилизация |
| JavaScript-доступ | element.dataset.importance |
Простое взаимодействие |
Практические примеры:
1. Доступ через JavaScript:const term = document.querySelector('b[data-category]');
console.log('Категория термина:', term.dataset.category);
// Изменение данных
term.dataset.importance = 'critical';
term.dataset.lastUpdated = new Date().toISOString();
/* Стиль для важных терминов */
b[data-importance="high"] {
color: #d63384;
border-bottom: 2px solid currentColor;
}
/* Индикация для терминов с подсказкой */
b[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 5px;
border-radius: 3px;
}
Рекомендации по именованию:
- Используйте осмысленные имена после префикса
data- - Придерживайтесь kebab-case (
data-user-id) - Избегайте слишком общих имен (
data-info) - Для сложных данных используйте JSON
Лучшие практики:
- Храните только строковые данные (числа преобразуйте)
- Не злоупотребляйте большими объемами данных
- Используйте для конфигурации, а не для логики
- Для сложных структур применяйте JSON.parse
Ограничения: Значения data-атрибутов всегда строковые. Сложные структуры требуют парсинга.
Пример с JSON-данными:
<b data-term-info='{"id":42,"def":"специальное обозначение"}'>
термин
</b>
<script>
const term = document.querySelector('[data-term-info]');
const termInfo = JSON.parse(term.dataset.termInfo);
console.log('ID термина:', termInfo.id);
</script>