解惑，什么是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获取属性的值

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

getAttribute 方法

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

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

dataset 方法

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

var article = document.getElementById('tu');
var data = article.dataset;
alert(data.category); // "Web Development"
alert(data.author); // 1

通过CSS获取属性的值

使用 attr

article::before {
    content: attr(data-category);
}

使用属性选择器

article[data-author='1'] {
    border-width: 1px;
}

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

参考

• Data Attributes@ MDN
• 什麼是 HTML 5 中的資料屬性（data-* attribute） @ pjchender