ข้อมูล HTML- *คุณสมบัติ
ตัวอย่าง
ใช้แอตทริบิวต์ data-* เพื่อฝังข้อมูลที่กำหนดเอง:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
ความหมายและการใช้งาน
แอ็ต ท ริบิว data-*ต์ใช้เพื่อเก็บข้อมูลแบบกำหนดเองที่เป็นส่วนตัวในเพจหรือแอปพลิเคชัน
คุณลักษณะdata-*ช่วยให้เราสามารถฝังแอตทริบิวต์ข้อมูลที่กำหนดเองในองค์ประกอบ HTML ทั้งหมดได้
ข้อมูลที่เก็บไว้ (กำหนดเอง) สามารถใช้ใน JavaScript ของหน้าเพื่อสร้างประสบการณ์ผู้ใช้ที่มีส่วนร่วมมากขึ้น (โดยไม่ต้องเรียกใช้ Ajax หรือแบบสอบถามฐานข้อมูลฝั่งเซิร์ฟเวอร์)
คุณลักษณะdata-*ประกอบด้วยสองส่วน:
- ชื่อแอตทริบิวต์ไม่ควรมีอักษรตัวพิมพ์ใหญ่ และต้องยาวอย่างน้อยหนึ่งอักขระหลังคำนำหน้า "data-"
- ค่าแอตทริบิวต์สามารถเป็นสตริงใดก็ได้
หมายเหตุ:แอตทริบิวต์ที่กำหนดเองที่นำหน้าด้วย "data-" จะถูกละเว้นโดยตัวแทนผู้ใช้
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนแอตทริบิวต์อย่างเต็มที่
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
ไวยากรณ์
<element data-*="somevalue">
ค่าแอตทริบิวต์
| Value | Description |
|---|---|
| somevalue | Specifies the value of the attribute (as a string) |
หน้าที่เกี่ยวข้อง
บทช่วยสอน HTML: แอตทริบิวต์ HTML
การอ้างอิง HTML DOM: HTML DOM getAttribute() วิธี การ