【html5 data-*属性】

 data-*属性：

data-*是HTML5新增的一个自定义数据属性功能，作为可以暂存数据使用。利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作，有兼容性问题。

(1)通过dataset获取

  var div = document.getElementById("node");
  var data = div.dataset;
  var color = div.dataset.color;
  var fontSize= div.dataset.fontSize;
  console.log(data);      //对象
  console.log(color);      //red
  console.log( fontSize);   //30px

注意fontSize使用了驼峰命名法。

(2)利用dataset删掉一个data-属性

delete div.dataset.color;

data-*属性选择器用法：

可以根据自定义的data-属性选择相关的元素。例如使用querySelectAll选择元素，例如

//选择所有具有data-class属性的元素
var div = document.querySelectorAll("[data-class]");

//选择所有data-class属性值为my的元素
var div = document.querySelectorAll("[data-class='my']");

同样的我们也可以通过data-属性值对应的元素设置CSS样式，如下

<style>
    div[data-class]{
        width: 100px;
        height: 100px;
        background: #8959a8;
        border: 1px solid #cccccc;
    }
    div[data-class="my"]{
        box-shadow: 0 0 5px 5px #CCCCCC;
    }
</style>
<div id="div1" data-class = "myClass"></div>
<div id="div2" data-class = "my" ></div>