Атрибут data-* тега <small>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <small>. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы в JavaScript и CSS.
Пример использования:
<small data-info-type="disclaimer" data-version="1.2">
Текст пояснения
</small>
Основные правила:
- Имя атрибута должно начинаться с
data- - Может содержать только буквы, цифры, дефисы и подчеркивания
- Значение должно быть строкой (для сложных данных используйте JSON)
- Регистр символов в именах сохраняется
Пример доступа через JavaScript:
<small id="note" data-category="legal" data-visible="true">
Юридическая оговорка
</small>
<script>
const note = document.getElementById('note');
// Чтение данных
const category = note.dataset.category; // "legal"
const isVisible = note.dataset.visible === 'true'; // true
// Запись данных
note.dataset.visible = 'false';
note.dataset.lastUpdated = '2023-11-15';
</script>
Использование в CSS:
<style>
small[data-category="legal"] {
color: #d32f2f;
font-weight: bold;
}
small[data-visible="false"] {
display: none;
}
</style>
<small data-category="legal" data-visible="true">
Важное уведомление
</small>
Рекомендации по именованию:
| Паттерн | Пример | Использование |
|---|---|---|
| data-тип-назначение | data-user-id |
Идентификаторы и ключи |
| data-состояние | data-expanded |
Флаги состояний |
| data-контекст | data-page-section |
Контекстная информация |
Пример с JSON данными:
<small id="json-data" data-metadata='{"author":"admin","created":"2023-11-01"}'>
Текст с метаданными
</small>
<script>
const metadata = JSON.parse(document.getElementById('json-data').dataset.metadata);
console.log(metadata.author); // "admin"
</script>
Лучшие практики:
- Используйте для невизуальных данных
- Избегайте хранения больших объемов данных
- Для сложных структур используйте JSON
- Следуйте единому стилю именования
- Не используйте для информации, которая должна быть в DOM
Ограничения:
- Значения всегда строковые (нужно преобразовывать)
- Не поддерживает глубокие структуры данных
- Доступ через dataset не работает в IE10 и ниже
- Не предназначены для стилизации (используйте классы)