Ví dụ một đoạn code sử dụng thuộc tính data-* để nhúng dữ liệu tuỳ chỉnh:
<ul>
<li data-loai-vat="chim">Quạ</li>
<li data-loai-vat="cá">Cá voi</li>
<li data-loai-vat="linh trưởng">Khỉ</li>
</ul>- Quạ
- Cá voi
- Khỉ
Định nghĩa và cách sử dụng
Thuộc tính data-* được sử dụng để lưu trữ dữ liệu tuỳ chỉnh riêng cho trang hoặc cho các ứng dụng.
Thuộc tính data-* cung cấp cho chúng ta khả năng nhúng dữ liệu tuỳ chỉnh lên tất cả các thẻ HTML
Dữ liệu tuỳ chỉnh có thể được sử dụng trong trang chứ JavaScript để tạo tính tương tác tốt hơn với trải nghiệm người dùng (không cần dùng đến Ajax hoặc các truy vấn dữ liệu máy chủ – điều này giúp giảm tải máy chủ – đỡ tốn chi phí hơn).
Thuộc tính data-* bao gồm 2 thành phần:
- Tên của thuộc tính không được phép bao gồm bất kỳ ký tự IN HOA nào, và phải có ít nhất một ký tự đằng sau tiền tố “data-“
- Giá trị của thuộc tính có thể chứa bất kỳ ký tự nào
Lưu ý: Thuộc tính tuỳ chỉnh với tiền tố “data-” sẽ bị bỏ quả bởi bọ tìm kiếm (user agent).
Trình duyệt hỗ trợ
| Thuộc tính | Chrome | IE | FireFox | Safari | Opera |
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Cú pháp
<element data-*="somevalue">