Hướng dẫn how do you set data attribute using javascript? - làm thế nào để bạn thiết lập thuộc tính dữ liệu bằng cách sử dụng javascript?

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- 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"

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"

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"

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.

Các vấn đề chính cần xem xét là hỗ trợ và hiệu suất của Internet Explorer. Internet Explorer 11+ cung cấp hỗ trợ cho tiêu chuẩn, nhưng tất cả các phiên bản trước đó không hỗ trợ dataset. Để hỗ trợ IE 10 và dưới bạn cần truy cập các thuộc tính dữ liệu với getAttribute[] thay thế. Ngoài ra, hiệu suất của các thuộc tính đọc data-* so với lưu trữ dữ liệu trong một đối tượng JavaScript thông thường là kém.

Điều đó nói rằng, đối với siêu dữ liệu liên quan đến phần tử tùy chỉnh, chúng là một giải pháp tuyệt vời.

Trong Firefox 49.0.2 [và có lẽ các phiên bản sớm hơn/sau này], các thuộc tính dữ liệu vượt quá 1022 ký tự sẽ không được đọc bởi JavaScript [ECMAScript 4].

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

  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"
  

  9 và data-* để biết thêm thông tin.
• Cách sử dụng các thuộc tính dữ liệu HTML [sitePoint]