HTMLDetailsElement

Das HTMLDetailsElement-Interface bietet spezielle Eigenschaften (zusätzlich zu den Eigenschaften des regulären HTMLElement-Interfaces, die es durch Vererbung ebenfalls zur Verfügung hat) zur Manipulation von <details>-Elementen.

EventTarget Node Element HTMLElement HTMLDetailsElement

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Eltern-Interface, HTMLElement.

HTMLDetailsElement.name

Ein String, der das HTML-Attribut name widerspiegelt, das es ermöglicht, eine Gruppe von gegenseitig ausschließenden <details>-Elementen zu erstellen. Das Öffnen eines der benannten <details>-Elemente dieser Gruppe führt dazu, dass andere Elemente der Gruppe geschlossen werden.

HTMLDetailsElement.open

Ein boolescher Wert, der das HTML-Attribut open widerspiegelt und angibt, ob die Inhalte des Elements (ohne das <summary>) dem Benutzer angezeigt werden sollen oder nicht.

Instanz-Methoden

Keine spezifische Methode; erbt Methoden von seinem Eltern-Interface, HTMLElement.

Ereignisse

Erbt Ereignisse von seinem Eltern-Interface, HTMLElement.

Beispiele

Kapitel protokollieren, wenn sie geöffnet und geschlossen werden

Dieses Beispiel verwendet das HTMLElement-Ereignis toggle, um Kapitel zu einem Log hinzuzufügen und zu entfernen, wenn sie geöffnet und geschlossen werden.

HTML

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

css
body {
  display: flex;
}

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

#summaries {
  flex-grow: 1;
}

JavaScript

js
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);
});

Ergebnis

Spezifikationen

Specification
HTML
# htmldetailselement
HTML
# event-toggle

Browser-Kompatibilität

api.HTMLDetailsElement

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLDetailsElement
name
open

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

api.HTMLElement.toggle_event.details_elements

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
toggle event fires at details elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch

  • Das HTML-Element, das dieses Interface implementiert: <details>