Skip to content
Related Articles

Related Articles

How to get the data attributes of an element using JavaScript ?
  • Last Updated : 05 Sep, 2019

Given an HTML document and the task is to select the data attributes of an element using JavaScript. There are few methods to solve this problem which are discussed below:

Approach:

  • First, select the element which is having data attributes.
  • We can either use dataset property to get access to the data attributes or use .getAttribute() method to select them by specifically typing their names.

Example 1: This example uses dataset property to get the data attributes of an element.




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to get the data attributes of
            an element using JavaScript ?
    </title>
</head
  
<body align = "center"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1
      
    <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;"
    </p>
      
    <span data-typeId="123" data-name = "name" 
            data-points="10" data-important="true"
            id="span">
        This is the Element.
    </span>
      
    <br><br>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style
        "font-size: 20px; font-weight: bold; color:green;"
    </p>
      
    <script
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
        var input = document.getElementById('span');
          
        el_up.innerHTML = "Click on the button to get "
                    + "the data attributes of element.";     
          
        function GFG_Fun() {
            var jsonData = JSON.stringify({
                id: parseInt(input.dataset.typeid),
                points: parseInt(input.dataset.points),
                important: input.dataset.important, 
                dataName: input.dataset.name
            });
            el_down.innerHTML = jsonData;
        }
    </script
</body
  
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example uses .getAttribute() method to get the data attributes of an element.




<!DOCTYPE HTML>  
<html>  
  
<head>  
    <title>  
        How to get the data attributes of
        an element using JavaScript ?
    </title>
</head>  
  
<body align = "center">  
      
    <h1 style = "color:green;" >  
        GeeksForGeeks  
    </h1
      
    <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;"
    </p>
      
    <span data-typeId="123" data-name = "name"
            data-points="10" data-important="true"
            id="span">
        This is the Element.
    </span>
      
    <br><br>
      
    <button onclick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style
        "font-size: 20px; font-weight: bold; color:green;"
    </p>
      
    <script>  
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
        var input = document.getElementById('span');
          
        el_up.innerHTML = "Click on the button to get "
                    + "the data attributes of element.";     
          
        function GFG_Fun() {
            var jsonData = JSON.stringify({
                id: parseInt(input.getAttribute('data-typeId')),
                points: parseInt(input.getAttribute('data-points')),
                important: input.getAttribute('data-important'), 
                dataName: input.getAttribute('data-name')
            });
            el_down.innerHTML = jsonData;
        }
    </script>  
</body>  
  
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :