SVGElement.dataset

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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
La définition de 'SVGElement.dataset' dans cette spécification.
Candidat au statut de recommandation 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) ? ? 41 10
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support Pas de support 51.0 (51) Pas de support 41 10 54

See also

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : hasalex
 Dernière mise à jour par : hasalex,