1. data 與 dataset的定義與使用

data-* 屬性是 HTML5 中的新屬性, 我們可以使用data-字首設定需要的自定義屬性，來儲存頁面或應用程式的私有自定義資料,

我們可以使用dataset屬性（物件）訪問在 HTML或 DOM中的元素上設定的所有自定義資料屬性(data-*)集

例子：

<div id="student" data-age="12" data-name="zhang">張三</div>

可以通過以下方式獲取

var ele = document.getElementById('student');  
var age = ele.dataset.age; // "12"
 

注意語法規則，屬性名稱 data-abc-def 與鍵值 abcDef 相對應

2.相容性

所有主流瀏覽器都支援 data-* 屬性，部分瀏覽器支援dataset

3.相容方案

function dataset(element){
    var obj={};
    if(element.dataset){
        return element.dataset;
    }else{
        for(var i=0;i<element.attributes.length;i++){
            var key=element.attributes[i].nodeName;
            if(/^data-\w+$/.test(key)){//判斷是否以data-開頭的屬性名
                var value=element.attributes[i].nodeValue;//值
                var keyName=key.match(/^data-(\w+)/)[1];//鍵名
                obj[keyName]=value;//物件新增屬性
            }
        }
    }
    return obj;
}
var ele = document.getElementById('student'); 
console.log(dataset(ele))
console.log(dataset(ele).age);
 

參考：