HTML5系列（3）data-*基础

用法

• data-* 全局属性 构成一类名称为自定义数据属性的属性，允许通过脚本在HTML 和其 DOM 表示之间交换专有信息。
• 唯一标识img也是不错的选择
• 是我们可以把所有自定义属性在dataset对象中统一管理，遍历啊什么的都很方便。

读取操作

• 直接在html上设置

<div id="name" data-name="hope">
        click here
</div>

• HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合 ，先看看dataset控制台返回的是什么

   var name = document.getElementById('name');
   consol.log(name.dataset);

这是一个DOMStringMap类型的键值对集合，既然是Map，那么很多方法就可以用了

• 用javascript读取

        var name = document.getElementById('name');
        // set
        name.setAttribute('data-age', '90');        
        name.dataset.age = '90';
        
        // get
        console.log(name.dataset.name); // hope
        console.log(name.dataset['name']); // hope
        name.getAttribute('data-name');

浏览器情况

• Internet Explorer 11+
• Chrome 8+
• Firefox 6.0+
• Opera 11.10+
• Safari 6+