HTMLDetailsElement

Интерфейс HTMLDetailsElement предоставляет специальные свойства (помимо стандартных свойств интерфейса HTMLElement, полученных по наследованию) для работы с элементами <details>.

Свойства экземпляра

Наследует свойства от родительского интерфейса HTMLElement.

HTMLDetailsElement.name: Строка, отражающая атрибут HTML name, который позволяет создавать группу взаимоисключающих элементов <details>. Открытие одного из элементов этой группы с заданным именем приводит к закрытию других элементов этой группы.
HTMLDetailsElement.open: Булево значение, отражающее атрибут HTML open, указывающее, отображаются ли содержимое элемента (без учёта <summary>) пользователю.

Методы экземпляра

Нет специфических методов; наследует методы от родительского интерфейса HTMLElement.

События

Наследует события от родительского интерфейса HTMLElement.

Примеры

Запись глав при открытии и закрытии

В этом примере используется событие HTMLElement toggle для добавления и удаления глав из списка при их открытии и закрытии.

HTML

<section id="summaries">
  <p>Chapter summaries:</p>
  <details id="ch1">
    <summary>Chapter I</summary>
    Philosophy reproves Boethius for the foolishness of his complaints against
    Fortune. Her very nature is caprice.
  </details>
  <details id="ch2">
    <summary>Chapter II</summary>
    Philosophy in Fortune's name replies to Boethius' reproaches, and proves
    that the gifts of Fortune are hers to give and to take away.
  </details>
  <details id="ch3">
    <summary>Chapter III</summary>
    Boethius falls back upon his present sense of misery. Philosophy reminds him
    of the brilliancy of his former fortunes.
  </details>
</section>
<aside id="log">
  <p>Open chapters:</p>
  <div data-id="ch1" hidden>I</div>
  <div data-id="ch2" hidden>II</div>
  <div data-id="ch3" hidden>III</div>
</aside>

CSS

body {
  display: flex;
}

#log {
  flex-shrink: 0;
  padding-left: 3em;
}

#summaries {
  flex-grow: 1;
}

JavaScript

function logItem(e) {
  console.log(e);
  const item = document.querySelector(`[data-id=${e.target.id}]`);
  item.toggleAttribute("hidden");
}

const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
  chapter.addEventListener("toggle", logItem);
});

Результат

Спецификации

Спецификация
HTML # htmldetailselement
HTML # event-toggle

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`HTMLDetailsElement`	36	79	49	23	10.1	36	49	24	10.3	3.0	37

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`HTMLDetailsElement`	10	79	49	15	6	18	49	14	6	1.0	≤37
`name`	120	120	130	106	17.2	120	130	80	17.2	25.0	120
`open`	10	79	49	15	6	18	49	14	6	1.0	≤37

api.HTMLDetailsElement

Таблицы BCD загружаются только в браузере

api.HTMLElement.toggle_event.details_elements

Таблицы BCD загружаются только в браузере

См. также

Элемент HTML, реализующий этот интерфейс: <details>

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement