首頁 > web前端 > H5教程 > 主體

如何使用H5的dataset

php中世界最好的语言
發布: 2018-03-14 15:15:05
原創
3318 人瀏覽過

這次帶給大家如何使用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(&#39;music&#39;);
 alert(mdoc.getAttribute(&#39;mtitle&#39;));
   </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(&#39;music-latch&#39;);
   var ds=mdoc.dataset;
   alert(ds.date+&#39;--&#39;+ds.album);
   </script>
登入後複製

這時候我們在存取data時,就不需要"data-"關鍵字了,直接利用.dataset.name就可以存取。這比上面的方法更方便。所做的任何更改,都是可以即時反映到元素data屬性上的。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何使用css3實作3d立體特效

使用DOM的一些小結

#

以上是如何使用H5的dataset的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!