More often than not, you need to store a bit of extra information along with the different HTML elements on your web app or site. It may not make any sense to users, but it can be helpful to you should you wish to perform operations based on that information.
For example, if you have an HTML table with rows from a database, for each row you might want to store the corresponding database id. That will make edits and other transactions much easier. This is a great use of a custom data attribute.
Until the introduction of these custom data attributes, developers would often use the class attribute to store such information, but the class attribute isn't actually meant for that, and this practice can make it more complicated to understand the code and the site markup.
With the introduction of HTML5 custom data attributes, it’s really easy to store and retrieve custom data within your HTML.
dataset property allows you to access the data attributes of an element easily.
Let's consider the following example.
First of all, we’ve defined the
data-employee-id custom data attribute on each
<li> element, which is used to store the employee ID. It can be used later on to fetch more details of an employee if it’s needed. Next, we’ve defined the
onclick event handler on each
<li> element, so when you click on any row, it will call the
getEmpId function, which eventually fetches the value of the
employee-id data attribute associated with the corresponding
getEmpId function, we’ve used the
dataset property of the
<li> element which is passed as the first argument. The
dataset property returns a
DOMStringMap object, which you can use to get individual properties.
When you’re fetching individual properties with the
dataset property, there are a few important things. The
data- prefix is removed from the attribute name. Any lowercase character followed by a hyphen is converted to uppercase, and the hyphen is removed. In other words,
dash-style attribute names are converted to
camelCase object keys. Other characters will remain unchanged.
In our case, with these rules, the
data-employee-id attribute is converted to
employeeId. Thus, you can use
element.dataset.employeeId to fetch the value of the
So that’s how the
In this section, we’ll discuss how you can use the
getAttribute method to get the value of data attributes.
We’ll revise the example we discussed in the previous section.
As you can see, it’s pretty straightforward to get custom data attributes with the
getAttribute method of an HTML element. You just need to pass the whole attribute name along with the
data- prefix to get the value of an attribute.
Access Data Attributes With the jQuery Library
In this section, we’ll discuss how you can use the jQuery library to get HTML5 data attributes.
data method allows you to fetch data attributes of an element easily.
Let’s go through the following example to understand how the jQuery data method works.
As you can see, we just need to pass the camel-case version of the data attribute name to get its value.
In jQuery, you can also use the
attr method to get the value of the specific attribute of an element.
Let’s quickly see how you can use the
attr method in jQuery.
… … var empId = $(element).attr('data-employee-id'); … …
As you can see, the
attr method works in the same way as that of the
In jQuery, the difference between the
attr method is that the
data method internally converts the string obtained from a data attribute to corresponding types like numbers, booleans, and so on.
So that's how you can use jQuery to fetch data attributes easily.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post