Three infrequently used HTML elements: & lt; details & gt;, & lt; summary & gt;, & lt; dialog & gt;, and summarydialog

Three infrequently used HTML elements: <details>, <summary>, <dialog>, and summarydialog
Previous

HTML5 not only adds semantic block-level elements and form-type elements, but also some other functional elements. These elements are not widely used due to browser support and other reasons.

 

Description

<Details> describes the details of a document or a part of the document. You can use it with <summary> to define the title for <details>. The title is visible. details are displayed when you click the title.

[Note] These two labels are only supported by chrome and opera.

 

<Details>

This label has only one open attribute to define whether the details is visible (invisible by default)

<Details> <summary> Copyright 2015. </summary> <p> the blue ideal of a small match </p> </details>

 

 

Dialog Box

<Dialog> label is used to define a dialog box or window, And the dialog box is located in the horizontal center of the window

 

<Details>

This label has only one open attribute to define whether the dialog box is visible (invisible by default)

[Note] Only chrome and opera Support

<Button> display dialog box </button> <dialog> I am the content of the dialog box </dialog> <script> var oBtn = document. getElementsByTagName ('button ') [0]; var oDia = document. getElementsByTagName ('Dialog ') [0]; oBtn. onclick = function () {console. log (oDia. getAttribute ('open') if (! ODia. getAttribute ('open') {oDia. setAttribute ('open', 'open'); this. innerHTML = 'hide text';} else {oDia. removeAttribute ('open'); this. innerHTML = 'display text' ;}</script>