解惑，什么是data-attribute ？

在接触 Web前端开发的一段时间，有时会去看Google或者百度的源代码，有某些地方定义了 data-key ,这种语法

但是如果你直接去 Google data-key 或 data-item 可能又查不到这个属性，到底这是哪个属性呢？

通过查资料我发现，利用 HTML 5，可以为元素添加data-*，从而存储自定义信息。其中*是可以自定义的部分。例如：

<article id='tu' data-category="Web Development" data-author="1"> ... </article>

这也就是为什么去 Google data-size 或 data-item 会找不到东西的原因，因为那是网页工程师自己定义出来的字词

既然我们存了这些自定义的数据属性，那么该怎么取这个值呢？

通过 JavaScript 访问自定义的信息有两种方式：getAttribute()方法和dataset属性

这就是经典的取得一个元素属性的方式，和以前一样。

document.getElementById('tu').getAttribute('data-category'); // "Web Development"

这是 HTML 5 新增的方法，可以更方便的读取所有的 data 信息。

var article = document.getElementById('tu');

var data = article.dataset;

alert(data.category); // "Web Development"

alert(data.author); // 1

article::before {

    content: attr(data-category);

}

article[data-author='1'] {

    border-width: 1px;

}

合理的使用数据属性，可以帮助我们在网页开发的时候更有效率或做出更多不同的效果

参考

巴特西