mozilla
Your Search Results

    Element.dataset

    « Element

    The HTMLElement.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, one entry for each custom data attribute.

    The name of the custom data attributes must follow the production rule of xml names with the constraints:

    • the name must not start with xml, whatever case is used for these letters;
    • the name must not contain any semicolon (U+003A);
    • the name must not contain capital A to Z letters  spaces.

    The custom data attributes is transformed to a key for the DOMStringMap entry with the following rules:

    • any dash (U+002D) is removed;
    • any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.

    This leads to camel-cased keys in the map.

    Syntax

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

    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
    

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 8 6.0 (6.0) 11 11.10 6
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support --- --- --- --- ---

     

    Document Tags and Contributors

    Contributors to this page: teoli
    Last updated by: teoli,