HTML được thiết kế với khả năng mở rộng trong tâm trí đối với dữ liệu nên được liên kết với một yếu tố cụ thể nhưng không cần có bất kỳ ý nghĩa xác định nào. Cú pháp đơn giản. Bất kỳ thuộc tính nào trên bất kỳ phần tử nào có tên thuộc tính bắt đầu bằng data-*
Các thuộc tính cho phép chúng tôi lưu trữ thêm thông tin về các yếu tố HTML tiêu chuẩn, ngữ nghĩa mà không có các bản hack khác như thuộc tính không chuẩn hoặc các thuộc tính bổ sung trên DOM.Cú pháp HTML
data-
là thuộc tính dữ liệu. Giả sử bạn có một bài viết và bạn muốn lưu trữ một số thông tin bổ sung không có bất kỳ đại diện trực quan nào. Chỉ cần sử dụng các thuộc tính data
cho điều đó:
…
Truy cập JavaScript
Đọc các giá trị của các thuộc tính này trong JavaScript cũng rất đơn giản. Bạn có thể sử dụng getAttribute[]
với tên HTML đầy đủ của chúng để đọc chúng, nhưng tiêu chuẩn xác định một cách đơn giản hơn: A DOMStringMap
bạn có thể đọc qua thuộc tính dataset
.
Để nhận thuộc tính data
thông qua đối tượng dataset
, hãy lấy thuộc tính bằng một phần của tên thuộc tính sau data-
[lưu ý rằng các dấu gạch ngang được chuyển đổi thành Camelcase].
const article = document.querySelector["#electric-cars"];
// The following would also work:
// const article = document.getElementById["electric-cars"]
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
Mỗi thuộc tính là một chuỗi và có thể được đọc và viết. Trong cài đặt trường hợp trên
const article = document.querySelector["#electric-cars"];
// The following would also work:
// const article = document.getElementById["electric-cars"]
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
3 sẽ thay đổi thuộc tính đó thành const article = document.querySelector["#electric-cars"];
// The following would also work:
// const article = document.getElementById["electric-cars"]
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
4.Truy cập CSS
Lưu ý rằng, vì các thuộc tính dữ liệu là các thuộc tính HTML đơn giản, bạn thậm chí có thể truy cập chúng từ CSS. Ví dụ: để hiển thị dữ liệu cha mẹ trên bài viết, bạn có thể sử dụng nội dung được tạo trong CSS với hàm
const article = document.querySelector["#electric-cars"];
// The following would also work:
// const article = document.getElementById["electric-cars"]
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
5:article::before {
content: attr[data-parent];
}
Bạn cũng có thể sử dụng các bộ chọn thuộc tính trong CSS để thay đổi kiểu theo dữ liệu:
article[data-columns="3"] {
width: 400px;
}
article[data-columns="4"] {
width: 600px;
}
Bạn có thể thấy tất cả điều này làm việc cùng nhau trong ví dụ JSBIN này.
Các thuộc tính dữ liệu cũng có thể được lưu trữ để chứa thông tin liên tục thay đổi, như điểm số trong một trò chơi. Sử dụng Truy cập CSS và Truy cập JavaScript ở đây, điều này cho phép bạn xây dựng một số hiệu ứng tiện lợi mà không phải viết các thói quen hiển thị của riêng bạn. Xem Screencast này để biết ví dụ sử dụng chuyển đổi nội dung và CSS được tạo [ví dụ JSBIN].
Giá trị dữ liệu là chuỗi. Giá trị số phải được trích dẫn trong bộ chọn để tạo kiểu có hiệu lực.
Vấn đề
Không lưu trữ nội dung nên hiển thị và có thể truy cập trong các thuộc tính dữ liệu, bởi vì công nghệ hỗ trợ có thể không truy cập chúng. Ngoài ra, trình thu thập dữ liệu tìm kiếm không thể lập chỉ mục các giá trị của các thuộc tính dữ liệu.
Xem thêm
- Bài viết này được điều chỉnh từ việc sử dụng các thuộc tính dữ liệu trong JavaScript và CSS trên hacks.mozilla.org.
- Các thuộc tính tùy chỉnh cũng được hỗ trợ trong SVG 2; Xem
6 vàconst article = document.querySelector["#electric-cars"]; // The following would also work: // const article = document.getElementById["electric-cars"] article.dataset.columns; // "3" article.dataset.indexNumber; // "12314" article.dataset.parent; // "cars"
data-*
để biết thêm thông tin. - Cách sử dụng các thuộc tính dữ liệu HTML [sitePoint]
Thí dụ
Sử dụng thuộc tính dữ liệu-* để nhúng dữ liệu tùy chỉnh:
& nbsp; Cú & nbsp; Cá hồi & nbsp; Tarantula
Hãy tự mình thử »
Định nghĩa và cách sử dụng
Các thuộc tính data-*
đượ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 thuộc tính data-*
cho chúng ta 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.
Dữ liệu được lưu trữ [tùy chỉnh] sau đó 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 [mà không có bất kỳ cuộc gọi AJAX hoặc truy vấn cơ sở dữ liệu phía máy chủ nào].
Các thuộc tính data-*
bao gồm hai phần:
- Tên thuộc tính không được chứa bất kỳ chữ hoa nào và phải dài nhất một ký tự sau tiền tố "Dữ liệu-"
- 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ố với "Dữ liệu-" sẽ bị bỏ qua hoàn toàn bởi tác nhân người dùng. Custom attributes prefixed with "data-" will be completely ignored by the user agent.
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.
dữ liệu-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Cú pháp
Giá trị thuộc tính
một số giá trị | 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 khảo HTML DOM: HTML DOM getAttribution [] phương thức