MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

The SVGElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element. It is a map of DOMStrings representing keys to DOMStrings representing the values for those keys, with one entry for each custom data attribute. Each key corresponds to the name of a custom data attribute; for example, a custom attribute named data-foo is in the map with the key "foo".

The name of a custom data attribute begins with "data-". It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_). Moreover, it should not contain ASCII capital letters (A to Z).

A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules:

  • the prefix "data-" is removed (including the dash);
  • for any dash (U+002D) followed by an ASCII lowercase letter a to z, the dash is removed and the letter is transformed into its uppercase counterpart;
  • other characters (including other dashes) are left unchanged.

The opposite transformation, that maps a key to an attribute name, uses the following rules:

  • Restriction: A dash must not be immediately followed by an ASCII lowercase letter a to z (before the transformation);
  • a prefix "data-" is added;
  • any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
  • other characters are left unchanged.

The restrictions established in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named "data-abc-def" corresponds to the key "abcDef".

Syntax

string = SVGElement.dataset.camelCasedName;

SVGElement.dataset.camelCasedName = string;

Value

The value of dataset is a DOMStringMap object mapping key names to values; both the key names and the values are, themselves, DOMString objects. You can access an individual value by using the syntax SVGElement.dataset.keyName to refer to the key.

Examples

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

var el = document.querySelector('#user');

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

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'SVGElement.dataset' in that specification.
Candidate Recommendation This attribute was added to the specification in SVG 2.

Browser compatibility

Feature Chrome Firefox (Gecko) Microsoft Edge Internet Explorer Opera Safari
Basic support 55 51 (51) No support No support 41 10
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 55 55 51.0 (51) No support 41 10

See also

Document Tags and Contributors

 Contributors to this page: xehpuk, jpmedley, hasalex, Sheppy
 Last updated by: xehpuk,