這次帶給大家如何使用H5的dataset,使用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屬性上的。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是如何使用H5的dataset的詳細內容。更多資訊請關注PHP中文網其他相關文章!