Атрибут data-* тега <ol>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <ol> в стандартизированном формате. Эти пользовательские атрибуты могут быть использованы JavaScript для хранения данных или CSS для специальной стилизации.
<ol data-list-type="priority" data-max-items="5">
<li>Высокий приоритет</li>
<li>Средний приоритет</li>
<li>Низкий приоритет</li>
</ol>
Основные правила:
| Правило | Пример |
|---|---|
Должен начинаться с data- |
data-category |
| Может содержать дефисы | data-user-id |
| Значение может быть любой строкой | data-visible="true" |
Доступ из JavaScript:
<ol id="task-list" data-list-id="123" data-created="2024-01-15">
<li>Задача 1</li>
<li>Задача 2</li>
</ol>
<script>
const list = document.getElementById('task-list');
console.log(list.dataset.listId); // "123"
console.log(list.dataset.created); // "2024-01-15"
</script>
Использование в CSS:
<style>
ol[data-priority="high"] {
border-left: 3px solid #d9534f;
}
ol[data-priority="low"] li {
opacity: 0.7;
}
</style>
<ol data-priority="high">
<li>Срочные дела</li>
</ol>
<ol data-priority="low">
<li>Несрочные дела</li>
</ol>
Рекомендации по использованию:
- Используйте для хранения данных, специфичных для вашего приложения
- Избегайте хранения сложных структур данных (используйте JSON для сериализации)
- Придерживайтесь единого формата именования (kebab-case рекомендуется)
- Не используйте для информации, которая должна быть доступна без JavaScript
Пример с JSON данными:
<ol data-list-metadata='{"id":123,"author":"John"}'>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ol>
<script>
const list = document.querySelector('ol');
const metadata = JSON.parse(list.dataset.listMetadata);
console.log(metadata.author); // "John"
</script>
Особенности работы:
- Доступны через свойство
datasetв JavaScript - Имена атрибутов преобразуются в camelCase (data-user-id → userId)
- Не влияют на отображение по умолчанию
- Не используются поисковыми системами
Примечание: Атрибуты data-* предоставляют стандартизированный способ хранения дополнительной информации в HTML-элементах. Они особенно полезны для связи HTML с JavaScript-логикой без использования нестандартных атрибутов или скрытых элементов.