Thẻ <details> HTML

Định nghĩa và cách sử dụng

<details> thẻ quy định thông tin chi tiết khác mà người dùng có thể mở và đóng theo nhu cầu.

<details> thẻ thường được sử dụng để tạo các phần tử tương tác mà người dùng có thể mở và đóng. Mặc định, phần tử này là đóng.

Bất kỳ loại nội dung nào cũng có thể được đặt trong <details> trong thẻ.

Lưu ý:<summary> thẻ với <details> Kết hợp sử dụng, có thể chỉ định tiêu đề hiện thị cho thông tin chi tiết. Khi người dùng nhấp vào tiêu đề, nó sẽ hiển thị <details> Nội dung được định nghĩa.

Xem thêm:

Tài liệu tham khảo HTML DOM:Đối tượng Details

Mô hình

Ví dụ 1

Định nghĩa thông tin chi tiết mà người dùng có thể mở và đóng theo nhu cầu:

<details>
  <summary>Trung tâm thế giới tương lai (Epcot Center)</summary>
  <p>Epcot là công viên chủ đề của Disney World Resort, với những điểm đến thú vị, các gian hàng quốc tế, pháo hoa đã đoạt giải thưởng và các hoạt động mùa vụ.</p>
</details>

Thử ngay

Ví dụ 2

Thiết lập樣式 cho <details> và <summary> bằng CSS:

<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>Trung tâm thế giới tương lai (Epcot Center)</summary>
  <p>Epcot là công viên chủ đề của Disney World Resort, với những điểm đến thú vị, các gian hàng quốc tế, pháo hoa đã đoạt giải thưởng và các hoạt động mùa vụ.</p>
</details>
</body>
</html>

Thử ngay

Thuộc tính

Thuộc tính Giá trị Mô tả
open open Định nghĩa rằng thông tin chi tiết nên được hiển thị cho người dùng (mở).

Thuộc tính toàn cục

<details> Thẻ này cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<details> Thẻ này cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị giá trị mặc định sau đây <details> Thành phần:

details {
  display: block;
}

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ yếu tố này hoàn toàn.

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