jQuery: Read and Change Data Attribute Value

In this tutorial, I would like to show you how to read out and modify the data attribute values of arbitrary HTML elements using JavaScript and jQuery.

I have divided the tutorial into the following sections:

• Read Data Attribute Values
• Write Data Attribute Values
• Read and Write any Attributes

As an example, we would like to use the following HTML:

<div id="mydiv" data-a="1" data-b="2"></div>

As you can see, this is a DIV element with the ID "mydiv" having assigned 2 data attributes. In detail, that is the attribute "data-a" with the value 1 and "data-b" with the value 2.

Read Data Attribute Values

To read out data attributes, jQuery is helping us with offering the method .data(). Let us have a look at an example:

var a = $("#mydiv").data("a");
var b = $("#mydiv").data("b");

var c = a + b;

alert(c);

Here, we are reading out both data attributes from the DIV element, we are summing up the values and showing an alert containing the result.

Concretely, we are using the selector $("#mydiv") in order to select the DIV element. Afterwards, we are using .data("a") and .data("b") to get the values of the attributes. We are storing them in the variables a and b, saving the sum in the variable c and outputting c with alert().

As you can see, when using .data(), we do not have to write "data-a" or "data-b". It is sufficient to write "a" and "b" to access the values.

Write Data Attribute Values

When passing a second parameter to .data(), this parameter is written to the corresponding data attribute. Here is a small example:

var a_new = 10;

$("#mydiv").data("a", a_new);
$("#mydiv").data("b", "test");

Again, we are using the selector $("#mydiv") in order to select the DIV. After that, we are setting the data attribute "a" to a variable we have defined before and we are setting "b" to a string, we have specified directly. With doing this, we get the following result:

<div id="mydiv" data-a="10" data-b="test"></div>

Read and Write any Attributes

As a classification and a small digression, it should not go unmentioned at this point, how we can read and write any other attributes, for example attributes that do not start with the prefix "data-".

For those attributes, we can use the method .attr(). The functionality is comparable to that of .data():

// read
var id = $("#mydiv").attr("id");
var a  = $("#mydiv").attr("data-a");

// write
$("#mydiv").attr("id", "new_id");
$("#mydiv").attr("data-a", 10);

Here we read out the value of the ID of our DIV element and later we change this value to "new_id". If we want to access Data-Attributes with the help of .attr(), we now have to use the full name, in our example "data-a" instead of only "a" as used with .data().