Thuộc tính data-* của HTML

Định nghĩa và cách sử dụng

data-* Thuộc tính được sử dụng để lưu trữ dữ liệu tùy chỉnh riêng của trang hoặc ứng dụng.

data-* Thuộc tính cho phép chúng ta chèn thuộc tính tùy chỉnh data vào tất cả các phần tử HTML.

Dữ liệu tùy chỉnh được lưu trữ có thể được sử dụng trong JavaScript của trang để tạo ra trải nghiệm người dùng tốt hơn (không thực hiện gọi Ajax hoặc truy vấn cơ sở dữ liệu trên máy chủ).

data-* Thuộc tính bao gồm hai phần:

  • Tên thuộc tính không nên chứa bất kỳ ký tự in hoa nào, và sau tiền tố "data-" phải có ít nhất một ký tự
  • Giá trị thuộc tính có thể là bất kỳ chuỗi nào

Lưu ý: Người dùng đại diện sẽ hoàn toàn bỏ qua các thuộc tính tùy chỉnh có tiền tố "data-".

Xin xem thêm:

Hướng dẫn HTML:Thuộc tính HTML

Tài liệu tham khảo HTML DOM:Phương thức getAttribute() của HTML DOM

Mẫu

Sử dụng thuộc tính data-* để chèn dữ liệu tùy chỉnh:

<ul>
  <li data-animal-type="鸟类">Chích chòe</li>
  <li data-animal-type="鱼类">Cá mập</li>
  <li data-animal-type="蜘蛛">Bọ nhện</li>
</ul>

Thử trực tiếp

Cú pháp

<element data-*="somevalue">

Giá trị thuộc tính

Giá trị Mô tả
somevalue Định nghĩa giá trị của thuộc tính (theo chuỗi).

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

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