HTML 'data-'属性的作用是什么？
核心
data-xxx 为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取；
var cur = document.getElementById('cur');
//使用attributes方法存取data-*自定义属性的值非常方便
var trueImg = cur.getAttribute("data-img");
//使用setAttribute设置 data- 属性
cur.setAttribute('data-site', 'http://www.xxx');
需要注意的是，data- 之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
案例说明
语法非常简单。所有在元素上以 data- 开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用 data 属性：
HTML
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
JS
在外部使用 JavaScript 去访问这些属性的值同样非常简单。你可以使用 getAttribute() 配合它们完整的 HTML 名称去读取它们，但标准定义了一个更简单的方法：DOMStringMap 你可以使用 dataset 读取到数据。
为了使用 dataset 对象去获取到数据属性，需要获取属性名中 data- 之后的部分（要注意的是破折号连接的名称需要改写为骆驼拼写法（如"index-number"转换为"indexNumber"))。
var article = document.querySelector('#electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
每一个属性都是一个可读写的字符串。在上面的例子中，article.dataset.columns = 5. 将会调整属性的值为 5。
CSS 访问
注意，data 设定为 HTML 属性，他们同样能被 CSS 访问。比如你可以通过 generated content 使用函数 attr() 来显示 data-parent 的内容：
article::before {
content: attr(data-parent);
}
你也同样可以在 CSS 中使用属性选择器根据 data 来改变样式：
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}
Data 属性同样可以存储不断变化的信息，比如游戏的得分。
使用 CSS 选择器与 JavaScript 去访问可以让你得到花俏的效果，这里你并不需要用常规的编写方案来编写代码。
数据值是字符串。必须在选择器中引用数值才能使样式生效。
说明
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
-
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
-
属性值可以是任意字符串
参考
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
