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