Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
HTMLDetailsElement
L'interface HTMLDetailsElement fournit des propriétés spécifiques (en plus de celles de l'interface HTMLElement dont elle hérite) pour manipuler les éléments HTML <details>.
Propriétés d'instance
Hérite des propriétés de son parent, HTMLElement.
HTMLDetailsElement.name-
Une chaîne de caractères reflétant l'attribut HTML
name, qui permet de créer un groupe d'éléments<details>mutuellement exclusifs. Ouvrir l'un des éléments<details>nommés de ce groupe ferme les autres éléments du groupe. HTMLDetailsElement.open-
Un booléen reflétant l'attribut HTML
open, indiquant si le contenu de l'élément (hors<summary>) doit être affiché à l'utilisateur·ice.
Méthodes d'instance
Aucune méthode spécifique ; hérite des méthodes de son parent, HTMLElement.
Évènements
Hérite des évènements de son interface parente, HTMLElement.
Exemples
Journaliser l'ouverture et la fermeture de chapitres
Cet exemple utilise l'évènement toggle de HTMLElement pour ajouter et retirer des chapitres d'un journal secondaire à mesure qu'ils sont ouverts et fermés.
HTML
<section id="summaries">
<p>Résumé des chapitres :</p>
<details id="ch1">
<summary>Chapitre I</summary>
La philosophie réprimande Boèce pour la folie de ses plaintes contre la
Fortune. Sa nature même est le caprice.
</details>
<details id="ch2">
<summary>Chapitre II</summary>
La philosophie, au nom de la Fortune, répond aux reproches de Boèce et
prouve que les dons de la Fortune lui appartiennent, à donner comme à
reprendre.
</details>
<details id="ch3">
<summary>Chapitre III</summary>
Boèce retombe dans son sentiment de misère actuel. La philosophie lui
rappelle l'éclat de ses fortunes passées.
</details>
</section>
<aside id="log">
<p>Chapitres ouverts :</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);
});
Résultat
Spécifications
| Specification |
|---|
| HTML # htmldetailselement |
| HTML # event-toggle |
Compatibilité des navigateurs
api.HTMLDetailsElement
Enable JavaScript to view this browser compatibility table.
api.HTMLElement.toggle_event.details_elements
Enable JavaScript to view this browser compatibility table.
Voir aussi
- L'élément HTML qui implémente cette interface :
<details>