How To Access HTML5 data- Attributes With JavaScript/JQuery

In HTML5 data- Attributes were introduced. They are a big improvement, because they allow you to store information within a HTML tag. They look like this:

<div id="abc" data-listsize="20"></div>

You see, the div tag is extended by a data-listsize attribute, which has the value 20. But how can you access this attributes with JavaScript? In this article I’ll show you both ways – with plain JavaScript and with jQuery.


Advertisement

Access the data attribute with JavaScript (without jQuery)

You can read data attributes with JavaScript quite easily. Here is a little example:

<div id="elem1" data-user-name="Joe"></div>

We have a DIV element with the data attribute data-user-name. Now we want to alert the value of this attribute:

<script>
var elem = document.getElementById('elem1');
var user = elem.dataset.userName;
alert(user);
</script>

So, what happened? First, the DIV was assigned to the variable elem. In the next step we assign the value of the data attribute to a variable with the name user. Then we alert the value of user.
Please note:

  • You can access the data attribute with the property dataset, followed by the name of the data attribute.
  • to access it, remove the data- at the beginnig of the attribute. You must also remove the hyphen. Then write the name camelCase. So data-user-name becomes userName.

Access the data attribute with jQuery

When working with jQuery, it is even more simpler to access data attributes. There are several ways.

In the next example, I’ll add some DIV elements to a HTML file. Of course, we also need jQuery included. You can find the complete code for this example below.

<div id="c1" data-content1="ABC"></div>
<div id="c2" data-content2="DEF"></div>
<div id="c3" data-content3="GHI"></div>
<div id="c4" data-content4="JKL"></div>
<div id="c5" data-content4="JKL"></div>
<div id="c6" data-content5="MNO"></div>
<div id="c7" data-content5="MNO"></div>
<div id="c6" data-content6="PQR"></div>
<div id="c7" data-content6="QRS"></div>
<div id="c7" data-content6="QRQ"></div>

Here are several ways to handle data attributes with jQuery.

Access data attributes with attr() function

This example uses the attr() function.

<script>
/*
Access the attribute data-content1 from element 
with id c1 $('#c1').attr('data-content1') and write the value into the div.
*/
$('#c1').html('DC 1: ' + $('#c1').attr('data-content1'));
</script>

Access data attributes with data() function

jQuery provides a function called data(). This function makes it very easy to access an set data attribute values. The next example locates the element and reads the data attribute data-content2.

<script>
/*
Access the data-attribute data-content2 with 
jquery data() function and the write value into the div.
*/
$('#c2').html('DC 2: ' + $('#c2').data('content2'));
</script>

Access data attributes with a specific name$(‘[…]’)

Here I use $(‘[data-content3]’) to access the attributes data-content3 and set its/their html() value.

<script>
/*
Access data-attributes data-content3 and 
set their innerHTML to Hello World
*/
$('[data-content3]').html('DC 3: ' + 'Hello World');
</script>

Access data attributes with a a specific name and value $(‘[…]=”…”‘)

It is also possible to access data attributes with a name and value give. Here I use $(‘[data-content4=”JKL”]’) to access the attributes data-content4 with the value JKL. and set their html() value.

<script>
/*
Access data-attributes data-content4 with the 
value = "JKL" and set their innerHTML to Hello World 2
*/
$('[data-content4="JKL"]').html('DC 4: ' + 'Hello World 2');
</script>

Access data attributes with a specific name and value and look through them

Now I access data attributes with a name and value given. I use the jQuery each() to loop through them. This allows you to handle each element separately.

<script>
/*
Access data-attributes data-content5 with the 
value = "MNO" and change their innerHTML
*/
 
$elem = $('[data-content5="MNO"]');
var i = 1;
$elem.each(function(){
	$(this).html('DC 5: No. ' + i);
	i++;
});
</script>

Access data attributes which contain a string in their value and loop through them

Now I access data attributes with a name and which contain a string in their value. I use the jQuery each() to loop through them.

<script>
/*
Access data-attributes data-content5 were the 
value contains "QR" and change their innerHTML
*/
$elem = $('[data-content6*="QR"]');
var i = 1;
$elem.each(function(){
	$(this).html('DC 6: No. ' + i);
	i++;
});
</script>

I hope, this was helpful. For a better understanding, I’ve copied you the code of the example above. So you can play around with it. 😉


The complete code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DATA Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
 
 
<div id="c1" data-content1="ABC"></div>
<div id="c2" data-content2="DEF"></div>
<div id="c3" data-content3="GHI"></div>
<div id="c4" data-content4="JKL"></div>
<div id="c5" data-content4="JKL"></div>
<div id="c6" data-content5="MNO"></div>
<div id="c7" data-content5="MNO"></div>
<div id="c6" data-content6="PQR"></div>
<div id="c7" data-content6="QRS"></div>
<div id="c7" data-content6="QRQ"></div>
 
 
<script>
/*
Access the attribute data-content1 from element 
with id c1 $('#c1').attr('data-content1')
*/
$('#c1').html('DC 1: ' + $('#c1').attr('data-content1'));
</script>
 
<script>
/*
Access the data-attribute data-content2 with 
jquery data() function
*/
$('#c2').html('DC 2: ' + $('#c2').data('content2'));
</script>
 
<script>
/*
Access data-attributes data-content3 and 
set their innerHTML to Hello World
*/
$('[data-content3]').html('DC 3: ' + 'Hello World');
</script>
 
<script>
/*
Access data-attributes data-content4 with the 
value = "JKL" and set their innerHTML to Hello World 2
*/
$('[data-content4="JKL"]').html('DC 4: ' + 'Hello World 2');
</script>
 
<script>
/*
Access data-attributes data-content5 with the 
value = "MNO" and change their innerHTML
*/
 
$elem = $('[data-content5="MNO"]');
var i = 1;
$elem.each(function(){
$(this).html('DC 5: No. ' + i);
i++;
});
</script>
 
<script>
/*
Access data-attributes data-content5 were the 
value contains "QR" and change their innerHTML
*/
$elem = $('[data-content6*="QR"]');
var i = 1;
$elem.each(function(){
$(this).html('DC 6: No. ' + i);
i++;
});
</script>
 
 
 
</body>
</html>

Advertisement
(Visited 50 times, 1 visits today)

Leave a Comment