Thuộc tính data-* (tùy chỉnh) trong HTML

Giới thiệu

Thuộc tính data-* cho phép nhúng dữ liệu tùy chỉnh (custom data) vào bất kỳ phần tử HTML nào. Đây là thuộc tính toàn cục (Global Attribute). Tên thuộc tính phải bắt đầu bằng data-, chỉ chứa chữ thường, số, gạch ngang, chấm, hai chấm; ít nhất một ký tự sau prefix.

Cú pháp

<element data-ten-thuoc-tinh="gia_tri">

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <script>
    function display(el) {
      var type = el.getAttribute("data-tutorial-type");
      alert(el.innerHTML + " = " + type + ".");
    }
  </script>
</head>
<body>
  <h1>Hướng dẫn</h1>
  <h2 onclick="display(this)" id="java" data-tutorial-type="ngôn ngữ lập trình">Java</h2>
  <h2 onclick="display(this)" id="jquery" data-tutorial-type="ngôn ngữ kịch bản">jQuery</h2>
  <h2 onclick="display(this)" id="mysql" data-tutorial-type="cơ sở dữ liệu">MySQL</h2>
</body>
</html>

Kết quả hiển thị

Nhấp vào tiêu đề "jQuery" sẽ hiện alert: "jQuery = ngôn ngữ kịch bản."