如何使用 JavaScript 获取元素的数据属性？

在本文中，我们将学习在 Javascript 中获取元素的数据属性。给定一个 HTML 文档，任务是使用 JavaScript 选择元素的数据属性。有几种方法可以解决这个问题，下面给出：

• 使用数据集属性
• 使用.getAttribute()方法

我们将讨论获取元素数据属性的两种方法。

方法：

• 首先，选择具有数据属性的元素。
• 我们可以使用dataset 属性来访问数据属性，也可以使用.getAttribute() 方法通过专门输入它们的名称来选择它们。

在这里，在下面的示例中，我们将使用getElementById()方法，该方法将返回具有给定 ID 的元素，并传递给函数。使用parseInt()函数将接受字符串,radix 参数并将它们转换为整数。 JSON.stringify()方法用于从中创建 JSON字符串。此方法有助于将对象转换为字符串。

示例 1：此示例使用数据集属性来获取元素的数据属性。

HTML

 

    
        How to get the data attributes
        of an element using JavaScript ?
    

 

    
        GeeksforGeeks
    
    
    
 
  
    This is the Element.
     
    
    
     click here 
    
    
 
 
    
    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;
    }
    

 

输出：

数据集属性

示例 2：本示例使用.getAttribute() 方法获取元素的数据属性。

HTML

 

    
        How to get the data attributes
        of an element using JavaScript ?
    

 

     
        GeeksforGeeks 
    
    
    
 
 
    This is the Element.
     
    
    
     click here 
    
    
 
 
     
    
    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;
    }
    

 

输出：

.getAttribute() 方法