HTML được thiết kế có lưu ý đến khả năng mở rộng đối với dữ liệu nên được liên kết với một phần tử cụ thể nhưng không cần có bất kỳ ý nghĩa xác định nào. Thuộc tính data-*
cho phép chúng tôi lưu trữ thông tin bổ sung về các phần tử HTML chuẩn, ngữ nghĩa mà không cần các thủ thuật khác như thuộc tính không chuẩn hoặc thuộc tính bổ sung trên DOM
cú pháp HTML
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-
đều là thuộc tính dữ liệu. Giả sử bạn có một bài báo và bạn muốn lưu trữ một số thông tin bổ sung không có bất kỳ hình ảnh đại diện nào. Chỉ cần sử dụng thuộc tính data
cho điều đó
…
truy cập JavaScript
Việ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
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"
0 với tên HTML đầy đủ của chúng để đọc chúng, nhưng tiêu chuẩn định nghĩa một cách đơn giản hơn. một 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"
1 bạn có thể đọc to thông qua thuộc tí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"
2Để lấy thuộc tính data
thông qua đối tượng
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"
2, hãy lấy thuộc tính theo một phần của tên thuộc tính sau data-
[lưu ý rằng 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 trường hợp trên, cài đặt
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"
4quyền truy cập CSS
Lưu ý rằng, vì thuộc tính dữ liệu là 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 gốc trên bài viết, bạn có thể sử dụng nội dung được tạo trong CSS bằng 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"
5article::before {
content: attr[data-parent];
}
Bạn cũng có thể sử dụng 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 hoạt động cùng nhau trong ví dụ về JSBin này
Thuộc tính dữ liệu cũng có thể được lưu trữ để chứa thông tin thay đổi liên tục, chẳng hạn như điểm số trong trò chơi. Sử dụng bộ chọn CSS và truy cập JavaScript ở đây, điều này cho phép bạn tạo một số hiệu ứng tiện lợi mà không cần phải viết quy trình hiển thị của riêng mình. Xem bản ghi màn hình này để biết ví dụ sử dụng nội dung được tạo và chuyển tiếp CSS [ví dụ về JSBin]
Giá trị dữ liệu là chuỗi. Các giá trị số phải được trích dẫn trong bộ chọn để kiểu dáng có hiệu lực
Vấn đề
Không lưu trữ nội dung có thể nhìn thấy và truy cập được trong các thuộc tính dữ liệu vì công nghệ hỗ trợ có thể không truy cập được chúng. Ngoài ra, trình thu thập thông tin tìm kiếm có thể không lập chỉ mục các giá trị của thuộc tính dữ liệu