爲了實現頁面的懶加載,我們常常需要實現使用自定義的屬性。詳見點擊打開鏈接
爲了獲取自定義的屬性,我們常常需要element.dataset屬性。
如下代碼實現兼容版本的element.dataset屬性。
實現思路:
1.對於兼容element.dataset屬性,直接使用該方法。
通過element.dataset屬性得到的是屬性集,一個對象。
單獨獲取某個自定義的屬性時, 對於data- 後面以-分隔的多個單詞組成的屬性名,獲取時使用駝峯式命名。
2.對於不兼容該方法的,遍歷元素的所有屬性,找到該屬性。
可以直接使用getAttribute得到屬性。獲取時,直接輸入屬性名。
代碼如下:
function dataset(element) {
var obj={}; //用於存儲對象的屬性
var key,value,keyname;
if(element.dataset){
return element.dataset
}else{
var attrs=element.attributes; //獲取元素的屬性對象。返回值爲對象
var len=attrs.length;
for (var i = 0; i < len; i++) {
key=attrs[i].name;
if(key.indexOf("data-")>-1){ //可以使用正則 /^data-\w+$/g.test(key)
value=attrs[i].value;
// var keyname=key.match(/^data-(\w+)$/)[1]; 可以使用正則獲取屬性名
keyname=key.slice(5);
obj[keyname]=value;
}
}
return obj;
}
}