คุณสมบัติ data-* ของ HTML

การกำหนดและการใช้งาน

data-* คุณสมบัติใช้เพื่อเก็บข้อมูลที่เป็นส่วนบุคคลของหน้าหรือโปรแกรม

data-* คุณสมบัติมอบให้เราสามารถฝังคุณสมบัติ data ที่กำหนดเองบนอุปกรณ์ HTML ทุกตัว

ข้อมูลที่เก็บไว้ (คุณสมบัติที่กำหนดเอง) สามารถถูกใช้โดย JavaScript ของหน้าเพื่อสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น (โดยไม่ต้องทำ Ajax หรือค้นหาฐานข้อมูลที่บนเซิร์ฟเวอร์)

data-* คุณสมบัติประกอบด้วยสองส่วน

  • ชื่อคุณสมบัติควรไม่มีใบอักษรใหญ่ และต้องมีอักษรอย่างน้อยหนึ่งตัวหลังจากคำนำหน้า "data-"
  • ค่าของคุณสมบัติสามารถเป็นตัวอักษรสายใดก็ได้

ให้ความ注意: ตัวแทนปฏิบัติการจะละเลยอักษรหน้าที่ "data-" ของคุณสมบัติที่กำหนดเอง

ดูเพิ่มเติมที่

ตัวเรียน HTMLคุณสมบัติของ HTML

คู่มือตามที่ HTML DOMHTML DOM getAttribute() มีฟังก์ชัน

ตัวอย่าง

ใช้คุณสมบัติ data-* ในการฝังข้อมูลที่กำหนดเอง

<ul>
  <li data-animal-type="สัตว์เลื้อยคลาน">กิ้งก่า</li>
  <li data-animal-type="ปลา">ปลาทราย</li>
  <li data-animal-type="สัตว์ปีก">บินนก</li>
</ul>

ทดลองด้วยตัวเอง

รูปแบบ

<element data-*="somevalue">

ค่าคุณสมบัติ

ค่า คำอธิบาย
somevalue กำหนดค่าของคุณสมบัติ (ในรูปแบบของ字符串)

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางบอกว่าเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 5.5 2.0 3.1 9.6