溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么使用H5的dataset，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
HTML5標準允許你在普通的元素標簽里，嵌入類似data-*的屬性，來實現一些簡單數據的存取。它的數量不受限制，并且也能由javascript動態修改，也支持CSS選擇器進行樣式設置。這使得data屬性特別靈活，也非常強大。有了這樣的屬性我們能夠更加有序直觀的進行數據預設或存儲。當然，任何的標簽元素里面可以隨意的加上任何自定義屬性，也可以獲取他們的值，但沒有這個來的靈活。我們先來看一下隨意的屬性存儲數據吧。
1.利用dom節點對象的setAttribute和getAttribute
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>
Document
</title>
</head>
<body>
<span id="music" mtitle="yestoday once more">昨日重現</span>
<script type="text/javascript">
var mdoc=document.getElementById('music');
alert(mdoc.getAttribute('mtitle'));
</script>
</body>
</html>運行這段代碼，頁面上可以獲取mtitle對應的值。這樣寫雖然可以，但是想要預置更多的信息，應該采用一個語義屬性data-*。比如剛才例子，想給音樂
注入更多關于這首歌數據，可以這樣寫：
<span id="music-latch" class="musique" data-date="2013" data-genre="Electronic" data-album="Settle (Deluxe)" data-artist="Disclosure" data-composer="Howard Lawrence & Guy Lawrence"> Latch (feat. Sam Smith) </span>
訪問屬性還是可以采用第一種方式：var album = document.getElementById("music-latch").getAttribute("data-album");
console.log(album);
但是這種方法比較低端，如果遇到多個data-*自定義字段，想要一次全部獲取所有的data屬性并包裝成對象的話，還必須做一個循環，很麻煩。不過我們還有Dataset API可用。
2. 利用 dataset API 存取 dataset
通過.dataset API，我們可以更方便的獲取元素的所有data字段，并以對象的方式，方便存取和遍歷。例如，對于上面的例子，可以運行 ：
<script type="text/javascript">
var mdoc=document.getElementById('music-latch');
var ds=mdoc.dataset;
alert(ds.date+'--'+ds.album);
</script>這時候我們在訪問data時，就不需要"data-"關鍵詞了，直接利用.dataset.name就可以訪問到。這比上面的方法更方便。所做出的任何更改，都是可以實時反映到元素data屬性上的。
以上是怎么使用H5的dataset的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
