How to Get Value of Data Attribute in JavaScript

JavaScript allows you to set data attributes of elements to save additional information about the element. Typically, this information is rendered by backend scripts such as PHP, Python, Ruby, etc. when the page is loaded. Often we need to be able to retrieve these values in order to be able to process it. In this article, we will learn how to get value of data attribute in JavaScript.

How to Get Value of Data Attribute in JavaScript

Let us say you have the following HTML element on your web page.

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

Let us say you want to be able to retrieve values of element attributes beginning with data- and use it in your JavaScript. There are several ways to do this. We will cover the 3 most common ones.

1. Using dataset property

You can easily do this using the following JavaScript code.

document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "ABC"
  });
});

In the above code, we access all data- related elements using dataset property. The above function is triggered the span element is clicked. When it is clicked, we obtain the various data attributes using this.dataset.typeid, this.dataset.type, this.dataset.points to get data-typeid, data-type and data-points respectively.

// json would equal:
{ "id": 123, "subject": "topic", "points": -1, "user": "ABC" }

2. Using getAttribute()

Alternatively, you can also use getAttribute() function to get any attribute’s value for the element.

var elem = document.getElementById('the-span');

var typeId = elem.getAttribute('data-typeId');
var type   = elem.getAttribute('data-type');
var points = elem.getAttribute('data-points');
var important = elem.getAttribute('data-important');

console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);

You will get the following output.

123 topic -1 true

3. Using JQuery

You can also use JQuery to get data attributes using data() function, which is available for all DOM elements by default.

var elem = $('#the-span');

var typeId = $elem.data('typeId');
var type   = $elem.data('type');
var points = $elem.data('points');
var important = $elem.data('important');

console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);

In the above example, we have used data() function to get data attribute. Please note, when you use data attribute, you need to mention the part after ‘data-‘ as selector. For example, we specify data.(‘typeId’) instead of data(‘data-typeId’).

In this article, we have learnt 3 different ways to get value of data attribute in JavaScript. You can easily use this in your web pages as well as JS libraries. Out of the above 3 methods, we recommend using jQuery’s data() function because it is very intuitive and easy to use.

How to Get Value of Data Attribute in JavaScript