jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity

Question

How to get data attributes using jquery .data()? In which case html5 data-* attributes converts to lowercase and camelcase? What are all the main rules to follow while using custom attributes to store data?

<input type="button" class="myButton" value="click me" data-productId="abc"/>
<input type="button" class="myButton" value="click me" data-product-id="abc"/>
<input type="button" class="myButton" value="click me" data-PRODUCT-ID="abc"/>
<input type="button" class="myButton" value="click me" data-ProDUctId="abc"/>

Solution

HTML5 allows us to create our own custom attributes to store data. Custom attributes can be called anything we like, like variable names, but they need to be prepended with the word 'data', and words are separated by dashes. You could add "foo", "bar", and "foo bar" data attributes to an input like this:

<input type="button" class="myButton" value="click me" data-foo="bar" 
data-bar="baz" data-foo-bar="true">

jQuery's .data() method will give you access to data-* attributes.

Using jQuery up to and including version 1.4, data attributes were case insensitive, therefore:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

would be accessible with

$('.myButton').data('productId');

jQuery 1.5 and 1.6

However, changes in jQuery 1.5 and 1.6 mean that data attributes are now forced to lowercase, so:

<input type="button" class="myButton" value="click me" data-productId="abc"/>

is only accessible with

$('.myButton').data('productid');

Any data-* attributes become properties of the element’s dataset object. The new property names are derived as follows:

• The attribute name is converted to all lowercase letters.
• The data- prefix is stripped from the attribute name.
• Any hyphen characters are also removed from the attribute name.
• The remaining characters are converted to CamelCase. The characters immediately following the hyphens removed in Step 3 become uppercase.

Notice that the original attribute name data-product-id has been converted to productId in the dataset object. The name conversion process must be accounted for when naming data-* attributes. Since the attribute names are converted to lowercase, it is best to avoid using uppercase letters. The following example shows how several attribute names translate to dataset properties.

"data-productId"  translates to "productid"
"data-product-id" translates to "productId"
"data-PRODUCT-ID" translates to "productId"
"data-ProDUctId"  translates to "productid"

NOTE:

• Custom data attributes are typically used to store metadata that aids/simplifies JavaScript code.
• An element can have any number of custom data attributes.
• Custom data attributes should only be used if a more appropriate element or attribute does not exist. For example, you should not create a custom “text description” attribute on an image. The existing alt attribute is a better choice.
• The HTML5 specification clearly states data-* attributes should not be used by third party applications. This means that programs such as search engines should not rely on custom data attributes when preparing search results.

Implementing custom attributes in HTML5 is not technically complex in itself, however the real difficulty is in choosing whether it is appropriate to use them in your own projects, and if so how to go about it efficiently. Finally, do remember that it’s still a little early to start using the dataset approach for functions your pages rely on, so be sure to provide an alternative for non-supporting browsers.

DEMO

Comments

[Bochu]

Note that using .data() only gives you the value of the attribute when the page was loaded or if it was changed using .data(). If you use .attr() to set the attribute, .data() will not return the updated value.

[dewd]

@Bochu and any new data added or changed using jQuery,data() will not be added or changed in the DOM. For 2 way changes between data and DOM it's best to use element.dataset

[Rajaprabhu Aravindasamy]

nice resource.. haven't heard of this before.. +1

[guettli]

This is not just a jquery thing, here are the specs: developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules: 1. the prefix data- is removed (including the dash); 2. 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; 3. other characters (including other dashes) are left unchanged.

[Oliver]

I find it noteworthy, that using jquery one can still access the value of the data attribute via the hyphenated name, e.g. $('<a data-product-id="One2Three"></a>').data('product-id') will be One2Three. Checked a moment ago with jQuery 3.3.1, but is true of 1.6 as well.