33 Votes

jQuery: Read and Change Data Attribute Value

Tutorial by Stefan Trost | Last update on 2022-05-05 | Created on 2015-05-27

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:

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().

ReplyPositiveNegative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.