ข้อมูล HTML- *คุณสมบัติ
ความหมายและการใช้งาน
แอตทริบิวต์
data-*นี้ใช้เพื่อเก็บข้อมูลที่กำหนดเองเป็นส่วนตัวในเพจหรือแอปพลิเคชัน
คุณลักษณะ
data-*นี้ช่วยให้เราสามารถฝังแอตทริบิวต์ข้อมูลที่กำหนดเองในองค์ประกอบ HTML ทั้งหมดได้
ข้อมูลที่เก็บไว้ (กำหนดเอง) สามารถใช้ใน JavaScript ของหน้าเพื่อสร้างประสบการณ์ผู้ใช้ที่มีส่วนร่วมมากขึ้น (โดยไม่ต้องเรียกใช้ Ajax หรือแบบสอบถามฐานข้อมูลฝั่งเซิร์ฟเวอร์)
คุณลักษณะ
data-*ประกอบด้วยสองส่วน:
- ชื่อแอตทริบิวต์ไม่ควรมีอักษรตัวพิมพ์ใหญ่ และต้องยาวอย่างน้อยหนึ่งอักขระหลังคำนำหน้า "data-"
- ค่าแอตทริบิวต์สามารถเป็นสตริงใดก็ได้
หมายเหตุ:แอตทริบิวต์ที่กำหนดเองที่นำหน้าด้วย "data-" จะถูกละเว้นโดยตัวแทนผู้ใช้
นำไปใช้กับ
แอตทริบิวต์
data-*นี้เป็นแอตทริบิวต์สากลและสามารถใช้ได้กับองค์ประกอบ HTML ใดๆ
| องค์ประกอบ | คุณลักษณะ |
|---|---|
| องค์ประกอบ 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>
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนแอตทริบิวต์อย่างเต็มที่
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |