如何在jquery和javascript中获得data-id属性？本教程通过实例展示了在Javascript和jquer

本教程通过实例展示了在Javascript和jquery中获取数据属性值的方法。

data-attributes是用来存储HTML元素的自定义数据的。

它可以应用于任何有效的HTML元素，包括div、span、输入和按钮。

data属性是用有效的语法定义的。

<element data-{validstring}=value>

Javascript获取data-id属性的例子

Javascript DOM API提供了选择器来访问DOM树中的元素。

比如说:

  <span id="myspan" data-age="30">Age is 30</span>

首先，使用id选择器函数getElementById()获取html元素。在返回的元素上调用getAttribute()方法。

下面是检索数据属性值的javascript。

var myspan = document.getElementById('myspan');
var age = myspan.getAttribute('data-age');
console.log(age) // 30

另一种方法是使用querySelector

首先用id选择器选择一个元素document.querySelector。它返回元素，调用element.dataset.property返回一个数据id属性的值。

var myspan = document.querySelector('#myspan');
console.log(myspan.dataset.age)

让我们声明一个带有data-id属性的HTML元素

 <button type="button" id="submit" data-submit-id="formsubmit"> Submit </button>
<span id="myspan" data-age="30">Age is 30</span>

首先，使用jquery id selectory选择一个元素（$("#submit")）data(attributee)返回值。

$("#submit").data('submit-id') //formsubmit

data()函数接受输入数据submit-id而不是data-submit-id。另一种方法，使用attr()函数

$("#submit").attr('data-submit-id')//formsubmit
$("#myspan").attr('data-age') // 30

attr()函数采取输入数据-submit-id的方式。

综上所述，在javascript和jquery中学习从HTML元素中获取data-id值的多种方法的例子