คุณสมบัติ HTML DOM Details open

คุณสมบัติ open ของ HTML DOM Details เกี่ยวข้องกับแอตทริบิวต์ open ของ HTML <details> เป็นแอตทริบิวต์ boolean ใช้ระบุว่าควรแสดงรายละเอียดให้ผู้ใช้เห็นหรือไม่ เมื่อตั้งเป็น true จะแสดงรายละเอียด แต่ถ้าตั้งเป็น false จะซ่อนรายละเอียดจากผู้ใช้

ไวยากรณ์ (Syntax)

detailsObject.open = true|false

ที่นี่ true = แสดงรายละเอียด false = ซ่อนรายละเอียด โดยค่าเริ่มต้นรายละเอียดจะถูกซ่อน

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <body> 
<h2>Details open() property</h2> 
<details id="Details1"> 
<summary>Eiffel Tower</summary> 
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p> 
</details> 
<p>Click the below button to set the details to be visible to the user</p> 
<button onclick="setDetail()">Visible</button> 
<script> 
  function setDetail() { 
    document.getElementById("Details1").open = true; 
  } 
</script> </body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิกปุ่ม "Visible":

คำอธิบายโค้ด

สร้าง <details> id "Details1" มี <summary> และ <p> ข้างใน:

<details id="Details1"> <summary>Eiffel Tower</summary> 
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p> 
</details>

สร้างปุ่ม "Visible" ทำงาน setDetail() เมื่อคลิก:

<button onclick="setDetail()">Visible</button>

setDetail() ดึง <details> element และตั้ง open = true เพื่อแสดงข้อมูล:

function setDetail() { 
  document.getElementById("Details1").open = true; 
}