在接觸 Web前端開發的一段時間，有時會去看Google或者百度的源代碼，有某些地方定義了 data-key ,這種語法 但是如果你直接去 Google data-key 或 data-item 可能又查不到這個屬性，到底這是哪個屬性呢？ 通過查資料我發現，利用 HTML 5，可以為元素添加data ...
在接觸 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;
}
合理的使用數據屬性， 可以幫助我們在網頁開發的時候更有效率或做出更多不同的效果
參考
