Đối tượng Details trong HTML DOM

Đối tượng Details đại diện cho phần tử <details>, cho phép ẩn/hiện nội dung tùy chọn. Chỉ có thuộc tính open để kiểm soát hiển thị.

Thuộc tính

Cú pháp

Tạo đối tượng Details:

var x = document.createElement("DETAILS");

Ví dụ

Tạo <details> và <summary> động:

<!DOCTYPE html> <html> <body> 
<h2>Details object</h2> 
<p>Nhấn nút để tạo DETAILS về một di tích</p> 
<button onclick="detCreate()">TẠO</button> 
<br><br> 
<script> 
  function detCreate() { 
    var et = document.createElement("DETAILS"); 
    var sum = document.createElement("SUMMARY"); 
    var sumText = document.createTextNode("Tháp Eiffel"); 
    var txt = document.createTextNode("Đây là một trong những di tích nổi tiếng nhất thế giới"); 
    sum.appendChild(sumText); 
    et.appendChild(sum); 
    et.appendChild(txt); 
    document.body.appendChild(et); 
  } 
</script> </body> </html>

Kết quả

Sau khi nhấn nút, xuất hiện <details> với summary "Tháp Eiffel":

Mở rộng để thấy nội dung: