Атрибут id тега <details>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <details>, который может использоваться для:
- Стилизации через CSS
- Обращения к элементу через JavaScript
- Создания якорных ссылок
- Связи с элементами форм через
<label>
<details id="faq-section-1">
<summary>Часто задаваемый вопрос #1</summary>
<p>Ответ на первый вопрос.</p>
</details>
<a href="#faq-section-1">Перейти к вопросу #1</a>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Уникальность | Должен быть единственным в документе |
| Синтаксис | Должен начинаться с буквы (A-Za-z) |
| Чувствительность | К регистру (myId ≠ myid) |
| CSS-специфичность | Высокий приоритет (1,0,0,0) |
Практическое применение:
<style>
#important-notice {
border: 2px solid #f44336;
background-color: #ffebee;
}
#important-notice summary {
font-weight: bold;
color: #d32f2f;
}
</style>
<details id="important-notice" open>
<summary>Важное уведомление</summary>
<p>Этот раздел содержит критически важную информацию.</p>
</details>
Использование в JavaScript:
<details id="dynamic-content">
<summary>Загружаемый контент</summary>
<div class="content">Загрузка...</div>
</details>
<script>
// Динамическая загрузка контента при раскрытии
document.getElementById('dynamic-content').addEventListener('toggle', function() {
if (this.open && !this.dataset.loaded) {
fetch('/api/content')
.then(response => response.text())
.then(html => {
this.querySelector('.content').innerHTML = html;
this.dataset.loaded = true;
});
}
});
</script>
Создание аккордеона:
<details id="section1">
<summary>Раздел 1</summary>
<p>Содержимое раздела 1</p>
</details>
<details id="section2">
<summary>Раздел 2</summary>
<p>Содержимое раздела 2</p>
</details>
<script>
// Закрытие других разделов при открытии одного
document.querySelectorAll('details').forEach(details => {
details.addEventListener('toggle', function() {
if (this.open) {
document.querySelectorAll('details').forEach(other => {
if (other !== this && other.open) other.open = false;
});
}
});
});
</script>
Рекомендации по использованию:
- Используйте осмысленные имена, отражающие назначение элемента
- Избегайте общих имён вроде "details1", "sectionA"
- Для стилизации предпочтительнее использовать классы
- Сохраняйте уникальность идентификаторов в документе
- Для динамически создаваемых элементов генерируйте уникальные ID