HTMLDetailsElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das Interface HTMLDetailsElement stellt spezielle Eigenschaften bereit (zusätzlich zu den regulären, die es durch Vererbung auch von HTMLElement erbt) zum Manipulieren von <details>-Elementen.

EventTarget Node Element HTMLElement HTMLDetailsElement

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLDetailsElement.name

Ein String, der das HTML-Attribut name widerspiegelt und es Ihnen erlaubt, eine Gruppe von sich gegenseitig ausschließenden <details>-Elementen zu erstellen. Das Öffnen eines der benannten <details>-Elemente dieser Gruppe bewirkt, 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 Elternteil, HTMLElement.

Ereignisse

Erbt Ereignisse von seiner Elternschnittstelle HTMLElement.

Beispiele

Kapitel protokollieren, wenn sie geöffnet und geschlossen werden

Dieses Beispiel verwendet das HTMLElement-toggle-Ereignis, um Kapitel zu einem Protokoll zu hinzufügen oder davon 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 Standard
# htmldetailselement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

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