HTMLDetailsElement

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Das HTMLDetailsElement-Interface bietet spezielle Eigenschaften (zusätzlich zu den regulären Eigenschaften, die es durch Vererbung auch vom HTMLElement-Interface hat) zur Manipulation von <details>-Elementen.

Instanz-Eigenschaften

Erbt Eigenschaften von seinem Elternteil, HTMLElement.

HTMLDetailsElement.name: Ein String, der das name-HTML-Attribut wiedergibt, das es Ihnen ermöglicht, eine Gruppe von sich 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 open-HTML-Attribut wiedergibt und angibt, ob die Inhalte des Elements (ausgenommen das <summary>) dem Benutzer angezeigt werden sollen oder nicht.

Instanz-Methoden

Keine spezifische Methode; erbt Methoden von seinem Elternteil, HTMLElement.

Ereignisse

Erbt Ereignisse von seinem Eltern-Interface, HTMLElement.

Beispiele

Kapitel protokollieren, wenn sie geöffnet und geschlossen werden

Dieses Beispiel verwendet das HTMLElement-toggle-Ereignis, um Kapitel beim Öffnen und Schließen einem Protokoll aside hinzuzufügen und daraus zu entfernen.

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

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

Spezifikation
HTML # htmldetailselement
HTML # event-toggle

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

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden