Dữ liệu HTML- * Thuộc tính
Thí dụ
Sử dụng thuộc tính data- * để nhúng dữ liệu tùy chỉnh:
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
Định nghĩa và Cách sử dụng
Các data-*thuộc tính được sử dụng để lưu trữ dữ liệu tùy chỉnh riêng tư cho trang hoặc ứng dụng.
Các data-*thuộc tính cung cấp cho chúng tôi khả năng nhúng các thuộc tính dữ liệu tùy chỉnh trên tất cả các phần tử HTML.
Sau đó, dữ liệu được lưu trữ (tùy chỉnh) có thể được sử dụng trong JavaScript của trang để tạo trải nghiệm người dùng hấp dẫn hơn (không có bất kỳ lệnh gọi Ajax hoặc truy vấn cơ sở dữ liệu phía máy chủ nào).
Các data-*thuộc tính bao gồm hai phần:
- Tên thuộc tính không được chứa bất kỳ chữ cái viết hoa nào và phải dài ít nhất một ký tự sau tiền tố "data-"
- Giá trị thuộc tính có thể là bất kỳ chuỗi nào
Lưu ý: Các thuộc tính tùy chỉnh có tiền tố là "data-" sẽ bị tác nhân người dùng hoàn toàn bỏ qua.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Attribute | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Cú pháp
<element data-*="somevalue">
Giá trị thuộc tính
| Value | Description |
|---|---|
| somevalue | Specifies the value of the attribute (as a string) |
Các trang liên quan
Hướng dẫn HTML: Thuộc tính HTML
Tham chiếu HTML DOM: Phương pháp HTML DOM getAttribute ()