首先，先介紹一下關于javascript中dataset屬性。。
html5中可以使用data-前綴設置我們需要的自定義屬性,來進行一些數據的存放。
下面是元素應用data屬性的一個例子：
<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>
要想獲取某個屬性的值,可以像下面這樣使用dataset對象:
var expenseday=document.getElementById('day-meal-expense'); var typeOfDrink=expenseday.dataset.drink; console.log(typeOfDrink);//tea console.log(expenseday.dataset.food);//noodle console.log(expenseday.dataset.meal);//lunch如果瀏覽器支持dataset,則會彈出注釋內容,如果瀏覽器不支持dataset則會報錯,無法獲取屬性drink/food/meal的值:對象為null或未定義(如IE9版本).
data屬性基本上所有的瀏覽器都是支持的,但是dataset對象支持的就比較特殊了,目前僅在Opera 11.1+,Chrome 9+下可以通過javascript,使用dataset訪問你自定義的data屬性.至于其他瀏覽器,FireFox 6+(未出)以及Safari 6+(未出)會支持dataset對象,至于IE瀏覽器,目前看來還是遙遙無期的趨勢.
問：不是有getAttribute來獲取自定義屬性么。要這個干嘛？？
答：如果使用傳統的方法獲取屬性值應該會類似下面：
var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');現在,如果我們要獲得多個自定義的屬性值,就要用下面N行代碼來實現了:
var attrs=expenseday.attributes, expense={},i,j;for (i=0,j=attrs.length;i<j;i++){ if(attrs[i].name.substring(0,5)=='data-'){ expense[attrs[i].name.substring(5)]=attrs[i].value; }}而使用dataset屬性,我們根本不需要任何循環去獲取你想要的那個值,直接秒殺：
expense=document.getElementById('day-meal-expense').dataset;問：怎么操作這玩意~
答：可以像下面這樣操作名-值對:
charInput=[]; for(var item in expenseday){ charInput.push(expenseday[item]); }讓所有的自定義屬性塞到一個數組中.
如果你想刪除一個data屬性,可以這么做:
delete expenseday.dataset.meal;console.log(expenseday.dataset.meal)//undefined
如果你想給元素添加一個屬性,可以這么做:
expenseday.dataset.dessert='icecream';console.log(expenseday.dataset.dessert);//icecream
dataset并不是典型意義上的JavaScript對象,而是個DOMStringMap對象,DOMStringMap是HTML5一種新的含有多個名-值對的交互變量.
下面來個實際的應用吧~
（當然圖片地址肯定是空的。想要看效果的自己去加個圖片地址，這個效果附上圖片也是看不出什么所以就不上截圖了）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖片延遲加載</title> <style> #box{ width: 100%; height: 500px; } #box img{ width: 100%; height: 500px; transition: 1s; opacity: 0; } </style></head><body> <div id="box"></div> <script type="text/javascript"> var data=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"] var box=document.getElementById('box'); // var img=document.createElement(img); for (var i = 0; i < data.length; i++) { var img=document.createElement('img'); img.dataset.src=data[i]; // img.style.opacity=1; box.appendChild(img); // console.log(box); } var imgs=document.querySelectorAll('img'); window.addEventListener('scroll',loadFn); window.addEventListener('load',loadFn); function loadFn(){ for (var i = 0; i < imgs.length; i++) { if(imgs[i].getBoundingClientRect().top<window.innerHeight){ if(imgs[i].dataset.src){ imgs[i].src=imgs[i].dataset.src; imgs[i].style.opacity=1; imgs[i].removeAttribute('data-src'); } } } } </script></body></html>以上這篇基于dataset的使用和圖片延時加載的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
