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 DOMString
s representing keys to DOMString
s 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:
"data-"
is removed (including the 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;
The opposite transformation, that maps a key to an attribute name, uses the following rules:
a
to z
(before the transformation);"data-"
is added;A
to Z
is transformed into a dash followed by its lowercase counterpart;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"
.
string = SVGElement.dataset.camelCasedName; SVGElement.dataset.camelCasedName = string;
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.
<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
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. |
Feature | Chrome | Firefox (Gecko) | Microsoft Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 55 | 51 (51) | ? | ? | 41 | 10 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|
Basic support | No support | 51.0 (51) | No support | 41 | 10 | 54 |
data-*
class of global attributes.data-*
class of global attributes.SVGElement
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGElement/dataset