解惑，什么是data-attribute ？
2020-07-27 15:13 ganp 阅读(890) 评论(0) 编辑 收藏 举报在接触 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;
}
合理的使用数据属性， 可以帮助我们在网页开发的时候更有效率或做出更多不同的效果
参考
