这次给大家带来h5中data-*属性使用方法汇总，h5中data-*属性使用的注意事项有哪些，下面就是实战案例，一起来看一下。
一、关于html元素的特性
1.html元素都存在一些标准的特性：
id 元素在文档中的唯一标识符；
title 有关元素的附加说明信息，一般通过工具提示条显示出来；
lang 元素内容的语言代码，很少使用；
dir 语言的方向，很少使用；
classname，与元素的class特性对应，考虑到与ecmascript的保留字class的冲突，因此命名为classname；
2.操作特性的方法：
getattribute() 获取相关特性，也可以获取到自定义的特性，区别于使用dom元素的属性获取；
setattribute() 设置相关特性；
removeattribute() 删除相关特性；
3.关于获取html元素特性中使用getattribute()与直接使用dom元素的属性获取的区别 ：
例如：
var header=document.getelementbyid('header'); console.log(header.id);//header console.log(header.getattribute('id'));//header console.log(header.title);//test console.log(header.getattribute('title'));//test console.log(header.mytitle);//undefined console.log(header.getattribute('mytitle'));//monster1935
在本文示例中演示了通过两种方法获取html元素的标准特性以及自定义特性。可以发现：
getattribute()既可以访问标准特性也可以访问自定义特性，而是用dom元素本身属性访问html元素特性的时候只能访问标准特性。
原因：
html元素中只有标准特性才会以属性的形式添加到dom对象中。
特殊情况：
有两类特性，虽有在dom对象中有对应的属性名，但是属性的值与通过getattribute()返回的值并不相同。
1.style特性：
使用dom对象属性访问style的时候，返回的是一个对象，而使用getattribute()方法获取的时候返回的是css文本。
2.事件处理程序（例如：onclick）：
使用dom对象的属性访问的时候，返回的是一个javascript函数，而通过getattribute()方法获取时返回的是javas代码。
使用方法：
只有在获取自定义特性的时候使用getattribute()方法，操作dom的时候，使用对象的属性来获取。
二、html5中的自定义属性
1.html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息。
2.使用getattribute()方法以及setattribute()方法操作自定义属性。
例如：
var user=document.getelementbyid('user'); //使用attributes方法操作属性 //获取相关属性值 var name=user.getattribute('data-name'); console.log(name)//monster1935 var age = user.getattribute('data-age'); console.log(age);//123 //设置相关属性值 user.setattribute('data-sex','male'); console.log(user.getattribute('data-sex'));//male
上述示例中展示了使用getattribute()以及setattribute()方法操作html元素的自定义属性。
3.使用dataset操作自定义属性
例如：
var el=document.queryselector('#user'); console.log(el.id); console.log(el.dataset); //返回的是一个domstringmap对象 console.log(el.dataset.name); console.log(el.dataset.age); // 设置相关属性 el.dataset.home=shandong; console.log(el.dataset); // 删除相关属性 // delete el.dataset.home; el.dataset.home = null; console.log(el.dataset);
以上示例展示了使用dataset属性来操作自定义属性。dataset属性的值是一个domstringmap的一个示例，是一个名值对的映射。在这个映射中，每个data-name的形式的属性都有一个对应的属性，不同的是属性名中没有data-前缀。（比如，自定义属性是data-name，映射中对应的属性就是name）.还有一点需要注意的是如果data-属性名中包含了连字符（比如：data-date-of-birth),则映射中对应的属性为dateofbirth,即转换为相应的驼峰格式来显示。
4.dataset属性的兼容性问题
chrome 8+ firefox(gecko) 6.0+ internet explorer 11+ opera 11.10+ safari 6+
5.使用data-属性选择器
1.获取相关dom元素
var elem=document.queryselectorall([data-name='monster1935']);
2.设置相关css样式
<style>   p{     width:100px;     height:200px;     margin:20px;   }   p[data-name=monster]{     background-color: green;   }   p[data-name=monster1935]{     background-color: red   } </style>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎么实现js同步、异步、延迟加载
怎样使用@angular/cli v6.0开发pwa应用
以上就是h5中data-*属性使用方法汇总的详细内容。