HTMLElement.dataset

The dataset property on the HTMLElement interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM.  It is a map of DOMString, one entry for each custom data attribute.  Note that the dataset property itself can be read, but not directly written.  Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes.   Note also that an HTML data-attribute and its corresponding DOM dataset.property do not share the same name, but they are always similar:

  • The name of a custom data attribute in HTML begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_) -- but NOT any ASCII capital letters (A to Z).
  • The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

Chuyển đổi tên

Từ dash-style (kiểu-gạch-nối) sang camelCase (bướuLạcĐà): Tên thuộc tính dữ liệu tùy biến được chuyển đổi thành khóa cho DOMStringMap dự trên quy định sau:

  • Loại bỏ tiền tố data- (cùng gạch nối);
  • những gạch nối (U+002D) theo sau chữ cái in thường ASCII, từ a tới z, sẽ bị loại bỏ và chữ cái đó sẽ chuyển đổi thành dạng in hoa;
  • những ký tự còn lại (bao gồm gạch nối khác) được giữ nguyên.

Từ camelCase (bướuLạcĐà) sang dash-style (kiểu-gạch-nối): Cách chuyển đổi ngược lại, dò theo khóa để tìm ra tên thuộc tính, bằng quy định sau:

  • Rằng buộc: Gạch nối bị cấm đi liền đuôi chữ cái (từ a đến z) ở dạng in thường ASCII (trước khi biến đổi);
  • thêm tiền tố data-;
  • bất cứ chữ cái in hoa ASCII từ A tới Z sẽ được đổi thành gạch nối theo sau chữ cái dạng in thường tương ứng.
  • những ký tự còn lại không đổi.

Việc có rằng buộc trong quy định trên nhằm đảm bảo việc chuyển đổi có thể đảo ngược cho nhau.

Ví dụ, thuộc tính có tên data-abc-def sẽ có khóa tương ứng abcDef.

Truy cập giá trị

  • Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in element.dataset.keyname
  • Attributes can also be set and read using the object-properties bracket-syntax, as in element.dataset[keyname]
  • Toán tử in có thể dùng để kiểm tra xem thuộc tính đó có (tồn tại) hay không.

Loại giá trị

  • Khi một thuộc tính được gán, giá trị dữ liệu đó sẽ luôn được chuyển đổi thành định dạng chuỗi. Ví dụ, null sẽ được chuyển thành chuỗi "null".
  • Phòng khi cần xóa thuộc tính, ta có thể dùng toán tử delete. (tiếng Anh)

Cú pháp

  • string = element.dataset.camelCasedName;
  • element.dataset.camelCasedName = string;

  • string = element.dataset[camelCasedName];
  • element.dataset[camelCasedName] = string;

  • Thuộc tính dữ liệu tùy biến cũng có thể gán trực tiếp bằng thẻ HTML, nhưng tên thuộc tính buộc phải dùng cú pháp data- như trên.

Ví dụ

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// gán dữ liệu cho thuộc tính data
el.dataset.dateOfBirth = '1960-10-03'; 
// Kết quả: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Kết quả: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Kết quả: 'someDataAttr' in el.dataset === true

Thông số kỹ thuật

Thông số kỹ thuật Trạng thái Chú thích
HTML Living Standard
The definition of 'HTMLElement.dataset' in that specification.
Living Standard No change from latest snapshot, HTML 5.1
HTML 5.1
The definition of 'HTMLElement.dataset' in that specification.
Recommendation Snapshot of HTML Living Standard, no change from HTML5
HTML5
The definition of 'HTMLElement.dataset' in that specification.
Recommendation Snapshot of  HTML Living Standard, initial definition.

Tính tương thích trên trình duyệt

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
datasetChrome Full support 8Edge Full support 12Firefox Full support 6IE Full support 11Opera Full support 11Safari Full support 10WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Xem thêm