EN
JavaScript - get HTML element data attribute value
0 points
In this article, we would like to show you how to check if HTML element has data attribute using JavaScript.
Quick solution:
xxxxxxxxxx1
element.getAttribute('attribute-name');
In this example, we use getAttribute() method with the attribute name as an argument to get the HTML element data-attribute value.
xxxxxxxxxx1
2
<html>3
<body>4
<div id="my-element" data-attribute-name="attribute-value"></div>5
<script>6
7
// get element by id8
const element = document.querySelector("#my-element");9
10
// check if element has data-attribute11
const result = element.getAttribute('data-attribute-name');12
13
console.log(result); // attribute-value14
15
</script>16
</body>17
</html>DOM provides dataset property that gives access to data-* attributes collection. The data-* attributes names are converted to pascalCase notation and available in JavaScript API.
xxxxxxxxxx1
2
<html>3
<body>4
<div id="my-element" data-attribute-name="attribute-value"></div>5
<script>6
7
const element = document.querySelector("#my-element");8
9
const result = element.dataset.attributeName;10
11
console.log(result); // attribute-value12
13
</script>14
</body>15
</html>