19/09/2018, 14:42
data-* trong HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 < ! DOCTYPE html > < html > < head > <script> function showDetails ( animal ) { var ...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <script> function showDetails(animal) { var animalType = animal.getAttribute("data-animal-type"); alert(animal.innerHTML + " là một loại " + animalType + "."); } </script> </head> <body> <h1>Loài vật</h1> <p>Nhấn vào tên dưới đây để biết là loài vật gì:</p> <ul> <li onclick="showDetails(this)" id="owl" data-animal-type="chim">Owl</li> <li onclick="showDetails(this)" id="salmon" data-animal-type="cá">Salmon</li> <li onclick="showDetails(this)" id="tarantula" data-animal-type="nhện">Tarantula</li> </ul> </body> </html> |
Demo
Định nghĩa và cách sử dụng
Thuộc tính data-* được sử dụng để lưu trữ dữ liệu riêng trên trang hoặc ứng dụng.
Thuộc tính data-* giúp chúng ta có thể nhúng dữ liệu riêng trên tất cả các thành phần của HTML.
Lưu trữ dữ liệu có thể được sử dụng trong trang có chứa JavaScript để tạo ra nhiều trải nghiệm hấp dẫn hơn cho người dùng (không cần dùng đến Ajax hoặc truy vấn cơ sở dữ liệu trên máy chủ).
Thuộc tính data-* attributes gồm 2 phần:
- Tên thuộc tính không nên chứa bất kỳ ký tự viết hoa nào và có ít nhất một ký tự đứng đằng sau tiền tố “data-“
- Giá trị của thuộc tính có thể là chuỗi bất kỳ
Lưu ý: Trình duyệt sẽ hoàn toàn bỏ qua những thuộc tính có chứa tiền tố “data-“.
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| data-* | 4.0 | 2.0 | 5.5 | 3.1 | 9.6 |
Sự khác nhau giữa HTML 4.01 và HTML5
data-* là thuộc tính mới trong HTML5.
Cú pháp
|
1 |
<element data-*="Giá trị bất kỳ"> |
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| Giá trị bất kỳ | Giá trị của thuộc tính (một chuỗi) |
