解惑，什麼是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