Home » Tutorials » JavaScript » A Complete Guide Of Using HTML5 Data Attributes (Data Set)

A Complete Guide Of Using HTML5 Data Attributes (Data Set)

A Complete Guide Of Using HTML5 Data Attributes (Data Set)

  • Stumble it!
  • Share

Before HTML5 gains interests from the industry, we are always using HTML markup elements such as class names or rel attributes to define and store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler. You may using the JavaScript syntax as shown below to access and manipulte the data that you have stored:

var car = document.getElementById('mycar').getAttribute('data-brand');

This is the traditional way of accessing an atrribute via JavaScript. It’s simple enough right? But, how about you want to access more than few custom attributes? Then your code will getting messy as shown below:

var attrs = mycar.attributes,
d = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    d[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

Started feel headache by just looking at the code above? :) No worry! There is an exciting news for you to get your things done with less effort.

Introduction to HTML5 Data Attributes (Data Set)

Thanks to HTML5, we now can store, define custom data attributes on any HTML element using the data- prefix.

Example of Basic Usage

We can define custom data attributes as shown below in HTML structure:

<div id="mycar" 
  data-brand="Honda" 
  data-displacement="1799 cc">Civic</div>

Then we can easily retrieve the data value using the dataset object in JavaScript:

var mycar = document.getElementById('mycar');

//Retrieve all data attributes' values  
var allDetails = mycar.dataset;

//Or retrieve only specific data attribute's value
var brand = mycar.dataset.brand;

With just few lines of code, we can easily access and retrieve the custome data attributes compared to the traditional way that we mentioned earlier which using “getAttribute“.

Please be noted that hyphenated names become camel-cased. For example, if there was an attribute data-seating-capacity in the above markup, then its value would be retrieved by using mycar.dataset.seatingCapacity.


Manipulating Data Attributes

You can easily manipulate data attributes just as you access data attributes. For example, you want to delete an existing data attributes, you can do that with the keyword – delete:

delete mycar.dataset.brand;

Or, to add extra data attributes to an existing HTML element:

mycar.dataset.price;

HTML5 Data Attributes in CSS

The HTML5 data attribute is not only allow you to access and manipulate it quickly on HTML elements, it is also handy if you want to selectively apply CSS styles based on the attribute value. For example, you want to standardize all your Honda cars’ appearance then you could do this:

div[data-brand="Honda"] {
  border: 1px solid #ccc;
  color: #0099cc;
}

Conclusion

The HTML5 data attribute is an easiest way to access and manipulate HTML element through JavaScript. But, please bear in mind that using HTML5 data attribute does not improve code / rendering performance, but it does make it shorter, easier and more readable for developer. The data attribute is supported in most of the latest modern browsers such as Chrome, Safari and Firefox, but sadly not in IE.


  • Enhancing Google Map Interactivity with jQuery
  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes

  • Mark

    IE is the new Lynx

Android, iOS Development Tutorials