home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติเปิดรายละเอียด HTML DOM

คุณสมบัติเปิดรายละเอียด HTML DOM เชื่อมโยงกับคุณสมบัติเปิด HTML <รายละเอียด> เป็นแอตทริบิวต์บูลีนและใช้สำหรับระบุว่ารายละเอียดควรปรากฏแก่ผู้ใช้หรือไม่ เมื่อตั้งค่าเป็น "จริง" ผู้ใช้จะมองเห็นรายละเอียดได้ อย่างไรก็ตาม การตั้งค่าเป็น "เท็จ" หมายถึงการซ่อนรายละเอียดจากผู้ใช้

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติเปิดรายละเอียด -

detailsObject.open = true|false

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

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติเปิดรายละเอียด -

<!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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

คุณสมบัติเปิดรายละเอียด HTML DOM

เมื่อคลิกปุ่ม "มองเห็น" −

คุณสมบัติเปิดรายละเอียด HTML DOM

ในตัวอย่างข้างต้น −

เราได้สร้าง 

<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>

จากนั้นเราได้สร้างปุ่ม "มองเห็น" ที่จะรันฟังก์ชัน setDetail() เมื่อผู้ใช้คลิก -

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

ฟังก์ชัน setDetail() รับองค์ประกอบ

โดยใช้ getElementById() และตั้งค่าแอตทริบิวต์ open ให้เป็นจริง นี้จะแสดงข้อมูลภายใน <รายละเอียด> ให้กับผู้ใช้ -

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