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().
About the Author
You 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
How to resize Image before Upload in Browser
Tutorial | 13 Comments
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
HTML: Difference between ID and CLASS
Info | 0 Comments
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
JavaScript: Create and Use Arrays
Info | 0 Comments
jQuery: Send HTML5 Canvas to Server via Ajax
Tutorial | 0 Comments
Color Values: Convert RGB, CMYK, CMY, HSV, TColor and XYZ Values
Tutorial | 0 Comments
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.