javascript 原生方法读取html5自定义属性data-*,jQ获取html5的data-*属性

data-*自定义数据属性

HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。

js获取data-*的方式

通过dataset属性访问

HTML代码

var div = document.getElementById("myDiv");

var age= div.dataset.age;//获取data-age的值

var name = div.dataset.name;//获取data-name的值

//设置值

div.dataset.age= 456;

div.dataset.name = "newname";

//最终HTML结果

dataset属性的值是DOMStringMap的一个实例，名值对的映射。每个data-name形式的属性都有一个对应的属性，只不过该属性名没有data-前缀。

需要注意的是，dataset中大小写的问题。带连字符连接的名称在使用的时候需要命名驼峰化。例如data-my-name对应的是dataset.myName的值。可看以下代码

读取的时候也是通过dataset对象，使用”.”来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名

div.dataset.myId = 789;

div.dataset.myName = "secondname";

//最终结果

传统获取方式 getAttribute

还是上述的例子。获取data-*的方法可使用如下方法