Атрибут data-* тега <details>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементах <details>. Эти пользовательские атрибуты не влияют на отображение, но могут использоваться JavaScript для управления поведением или CSS для условного стилизования.
<details data-section="faq" data-category="getting-started">
<summary>Как начать работу?</summary>
<p>Для начала работы выполните следующие шаги...</p>
</details>
Практическое применение:
1. Фильтрация разделов
<details data-category="billing">
<summary>Вопросы по оплате</summary>
<p>Контент о платежах...</p>
</details>
<button onclick="showOnly('billing')">Показать только платежи</button>
<script>
function showOnly(category) {
document.querySelectorAll('details').forEach(details => {
details.style.display = details.dataset.category === category ? '' : 'none';
});
}
</script>
2. Хранение состояния
<details data-persist-id="user-settings">
<summary>Настройки пользователя</summary>
<!-- Форма настроек -->
</details>
<script>
// Восстановление состояния при загрузке
document.addEventListener('DOMContentLoaded', () => {
const details = document.querySelector('[data-persist-id]');
const state = localStorage.getItem(details.dataset.persistId);
if (state) details.open = state === 'open';
// Сохранение состояния
details.addEventListener('toggle', () => {
localStorage.setItem(details.dataset.persistId, details.open ? 'open' : 'closed');
});
});
</script>
Рекомендации по именованию:
| Паттерн | Пример | Использование |
|---|---|---|
| data-section | data-section="user-profile" |
Группировка по разделам |
| data-category | data-category="billing" |
Категоризация контента |
| data-persist | data-persist="true" |
Сохранение состояния |
| data-version | data-version="2.1" |
Версионность контента |
Использование в CSS:
<style>
/* Стили для определенной категории */
details[data-category="warning"] {
border-left: 4px solid #ff9800;
}
/* Стили для открытых элементов с атрибутом */
details[data-important][open] {
background-color: #fff8e1;
}
</style>
<details data-category="warning" data-important="true">
<summary>Важное предупреждение</summary>
<p>Этот контент требует вашего внимания.</p>
</details>
Динамическое управление через JavaScript:
<details data-interactive="true">
<summary>Интерактивный раздел</summary>
<p>Контент будет загружен динамически...</p>
</details>
<script>
document.querySelectorAll('[data-interactive="true"]').forEach(details => {
details.addEventListener('toggle', function() {
if (this.open && !this.dataset.loaded) {
fetch('/api/content?section=' + this.id)
.then(response => response.text())
.then(html => {
this.querySelector('p').innerHTML = html;
this.dataset.loaded = true;
});
}
});
});
</script>
Лучшие практики:
- Используйте осмысленные имена атрибутов
- Придерживайтесь единого стиля именования (kebab-case)
- Не храните большие объемы данных - используйте ID
- Для сложных данных применяйте JSON в одном атрибуте
- Тестируйте производительность при массовом использовании
Примечание: Атрибуты data-* предоставляют гибкий способ хранения метаданных, но не заменяют собой семантическую разметку. Используйте их для дополнительной функциональности, сохраняя основную семантику HTML.