HTML5中data-*自定义属性作用

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

<div id="node" data-color="red" data-font-size="30px">你好</div>

（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

注意：data-之后以连字符分割的多个单词组成的属性，获取时候需要使用驼峰风格。如例子中的font-size需要改成fontSize。

Object.assign(node.style, node.dataset)  //使其存储样式数据生效。

如果你想删掉一个data-属性:

delete div.dataset.color;

（2）、使用getAttribute方法获取

var div = document.getElementById("node");
//获取自定义的值
var color = div.getAttribute("data-color");
var fontSize = div.getAttribute("data-font-size");
console.log(color);      //red
console.log( fontSize);   //30px

//设置自定义的值
div.setAttribute("data-font-weight","bold")

2、、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>

部分内容参考如下出处：https://zhuanlan.zhihu.com/p/94849216