ออบเจ็กต์ HTML DOM Summary

ออบเจ็กต์ summary ของ HTML DOM แทนองค์ประกอบ <summary> ในเอกสาร HTML ใช้ร่วมกับ <details> สร้างเนื้อหาที่ซ่อน/แสดงได้

ไวยากรณ์ (Syntax)

สร้างออบเจ็กต์ summary ใหม่:

document.createElement("SUMMARY");

ตัวอย่างการใช้งาน

ตัวอย่างสร้าง <details> และ <summary> แบบไดนามิก

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    text-align: center;
    background-color: #fff;
    color: #0197F6;
  }
  h1 {
    color: #23CE6B;
  }
  .btn {
    background-color: #fff;
    border: 1.5px dashed #0197F6;
    height: 2rem;
    border-radius: 2px;
    width: 60%;
    margin: 2rem auto;
    display: block;
    color: #0197F6;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>ตัวอย่าง DOM summary Object</h1>
<button onclick="createSummary()" class="btn">สร้างออบเจ็กต์ summary</button>
<script>
  function createSummary() {
    var details = document.createElement("DETAILS");
    var summary = document.createElement("SUMMARY");
    var para = document.createElement("P");
    var paraTxt = document.createTextNode("- ฉันคือองค์ประกอบ p");
    para.appendChild(paraTxt);
    var summaryTxt = document.createTextNode("ฉันคือองค์ประกอบ summary");
    summary.appendChild(summaryTxt);
    details.appendChild(summary);
    details.appendChild(para);
    document.body.appendChild(details);
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนคลิกปุ่ม - ไม่มีองค์ประกอบ details

หลังคลิกปุ่ม "สร้างออบเจ็กต์ summary" - ปรากฏ <details> พร้อม <summary>

คลิกที่ summary - แสดง/ซ่อนเนื้อหา <p> ภายใน

การใช้งาน: เหมาะสำหรับ FAQ, แถบข้อมูลย่อ/ขยาย, เมนูแบบ摺疊 ได้โดยไม่ต้องเขียน JavaScript เอง