Tanda <details> HTML

Definisi dan penggunaan

<details> label mengatur detail lain yang dapat dibuka dan ditutup pengguna sesuai kebutuhan.

<details> label biasanya digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup pengguna. Secara default, widget adalah ditutup. Ketika dibuka, ia akan mengekskandal dan menampilkan kontennya.

Konten apapun dapat disimpan dalam <details> dalam label.

Petunjuk:<summary> label dengan <details> Kombinasikan untuk menentukan tajuk yang dapat dilihat untuk detail. Ketika pengguna mengklik tajuk, ia akan menampilkan <details> Mengdefinikan konten yang ditentukan.

Lihat juga:

Panduan HTML DOM:Objek Details

Contoh

Contoh 1

Tentukan detail yang dapat dibuka dan ditutup pengguna sesuai kebutuhan:

<details>
  <summary>Bangunan Pusat Dunia Masa Depan (Epcot Center)</summary>
  <p>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性活动。</p>
</details>

亲自试一试

Contoh 2

Menggunakan CSS untuk menetapkan gaya <details> dan <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Bangunan Pusat Dunia Masa Depan (Epcot Center)</summary>
  <p>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性活动。</p>
</details>
</body>
</html>

亲自试一试

属性

属性 值 描述
open open 规定详细信息应该对用户可见（打开）。

全局属性

<details> 标签还支持 HTML 中的全局属性。

事件属性

<details> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <details> 元素：

details {
  display: block;
}

浏览器支持

表中的数字注明了首个完全支持该元素的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0