Атрибут data-* тега <summary>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <summary>. Эти пользовательские атрибуты не влияют на отображение, но могут быть использованы в CSS и JavaScript.
<details>
<summary data-section="user-profile" data-default-text="Профиль пользователя">
Профиль пользователя
</summary>
<!-- Содержимое -->
</details>
Синтаксис data-атрибутов:
| Формат | Пример | Описание |
|---|---|---|
data-имя |
data-section |
Простой атрибут |
data-составное-имя |
data-default-text |
Составное имя (дефисы вместо camelCase) |
Пример использования в CSS:
<style>
summary[data-section="important"] {
background-color: #fff3cd;
border-left: 3px solid #ffc107;
}
</style>
<details>
<summary data-section="important">Важное уведомление</summary>
<p>Содержимое важного раздела...</p>
</details>
Рекомендации:
- Используйте для хранения информации о разделе
- Придерживайтесь именования через дефис (data-section-name)
- Для сложных данных используйте JSON в одном атрибуте
- Избегайте хранения больших объемов данных
Ограничения:
- Значения всегда строковые (требуется преобразование)
- Не предназначены для хранения сложных структур данных
- Доступ через dataset не поддерживается в очень старых браузерах
Пример с JavaScript:
<details id="user-section">
<summary data-section="user" data-default="Профиль">Профиль</summary>
<!-- Содержимое -->
</details>
<script>
const summary = document.querySelector('#user-section summary');
console.log(summary.dataset.section); // "user"
console.log(summary.dataset.default); // "Профиль"
</script>
Пример с JSON данными:
<details>
<summary data-info='{"id": "sec1", "priority": "high"}'>
Важный раздел
</summary>
<!-- Содержимое -->
</details>
Примечание: Data-атрибуты особенно полезны для создания динамических интерфейсов без изменения структуры HTML.