Các phần tử HTML có thể có các thuộc tính trên đó được sử dụng cho mọi thứ, từ thông tin trợ năng đến điều khiển theo phong cách.
<!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region -->
<div class="names" role="region" aria-label="Names"></div>
Điều không được khuyến khích là tạo ra các thuộc tính của riêng bạn hoặc thay thế các thuộc tính hiện có cho chức năng không liên quan.
<!-- `highlight` is not an HTML attribute -->
<div highlight="true"></div>

<!-- `large` is not a valid value of `width` -->
<div width="large">

Cú pháp

Sẽ rất hữu ích khi có thể tạo các thuộc tính HTML của riêng bạn và đưa thông tin của riêng bạn vào bên trong chúng. May mắn thay, bạn có thể! Đó chính xác là những gì thuộc tính data. Chúng như thế này:
<!-- They don't need a value -->
<div data-foo></div>

<!-- ...but they can have a value -->
<div data-size="large"></div>

<!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside -->
<li data-prefix="Careful with HTML in here."><li>

<!-- You can keep dashing if you like -->
<aside data-some-long-attribute-name><aside>
Thuộc tính dữ liệu thường được gọi là data-* thuộc tính, vì chúng luôn được định dạng như vậy. Từ data, sau đó là dấu gạch ngang -, sau đó là văn bản khác mà bạn có thể tạo ra.

Bạn có thể sử dụng thuộc tính data một mình không?

Nó có thể sẽ không ảnh hưởng gì, nhưng bạn sẽ không nhận được JavaScript API mà chúng tôi sẽ đề cập ở phần sau của hướng dẫn này. Về cơ bản, bạn đang tạo ra một thuộc tính cho chính mình, mà như tôi đã đề cập trong phần giới thiệu, không được khuyến khích.

Không nên làm gì với các thuộc tính dữ liệu?

Lưu trữ nội dung có thể truy cập được. Nếu nội dung cần được xem hoặc đọc trên một trang, không chỉ đặt chúng trong các thuộc tính dữ liệu, mà hãy đảm bảo rằng nội dung đó nằm trong nội dung HTML ở đâu đó.
<!-- This isn't accessible content -->
<div data-name="Chris Coyier"></div>

<!-- If you need programmatic access to it but shouldn't be seen, there are other ways... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Tạo kiểu với các thuộc tính dữ liệu

/* Select any element with this data attribute and value */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/* You can scope it to an element or class or anything else */
button[data-type="download"] { }
.card[data-pad="extra"] { }
Điều này có thể hấp dẫn. Các hook tạo kiểu chủ yếu trong HTML/CSS là các lớp, và trong khi các lớp rất tuyệt vời (chúng có tính đặc hiệu trung bình và các phương thức JavaScript đẹp mắt thông qua classList) thì một phần tử có hoặc không (về cơ bản là bật hoặc tắt). Với data-*, bạn có được khả năng bật/tắt đó cộng với khả năng lựa chọn dựa trên giá trị mà nó có ở cùng một mức độ cụ thể.
/* Selects if the attribute is present at all */
[data-size] { }

/* Selects if the attribute has a particular value */
[data-state="open"],
[aria-expanded="true"] { }

/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
[data-version^="3"] { }

/* "Contains" meaning if the value has the string anywhere inside it */
[data-company*="google"] { }

Ví dụ về trường hợp sử dụng tạo kiểu

<div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>
[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}

body {
  margin: 1rem;
}

Truy cập các thuộc tính dữ liệu trong JavaScript

Giống như bất kỳ thuộc tính nào khác, bạn có thể truy cập giá trị bằng phương thức chung getAttribute.
let value = el.getAttribute("data-state");

// You can set the value as well.
// Returns data-state="collapsed"
el.setAttribute("data-state", "collapsed");
Nhưng các thuộc tính dữ liệu cũng có API đặc biệt của riêng chúng. Giả sử bạn có một phần tử có nhiều thuộc tính dữ liệu (điều này hoàn toàn ổn):
<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon="🏌️‍♀️"
></span>
Nếu bạn có tham chiếu đến phần tử đó, bạn có thể đặt và lấy các thuộc tính như:
// Get
span.dataset.info; // 123
span.dataset.index; // 2

// Set
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = "🎪";

Dữ liệu JSON bên trong các thuộc tính dữ liệu

<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>
Này, tại sao không? Nó chỉ là một chuỗi và có thể định dạng nó thành JSON hợp lệ (lưu ý đến dấu ngoặc kép và những thứ tương tự). Bạn có thể kéo dữ liệu đó và phân tích cú pháp nếu cần.
const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person