SVGElement.dataset

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

Browser compatibility

See also

• The SVG data-* class of global attributes.
• The HTML data-* class of global attributes.
• SVGElement