技術標籤：學到老活到老html5js

在實際開發中，有時候傳輸過來的資料需要在前端渲染的時候進行儲存，那麼這個時候就可以使用到HTML5中新增的data-自定義屬性來儲存需要的資料

例如這個標籤中就利用自定義標籤儲存了需要的資訊

<span class="float_left main_ul_span blue_hover" id="test" data-exam-id="AAA" onclick="check_exam(this.dataset.examId)">{{exam.name}}<
 
/span>

獲取這個自定義屬性的內容不能直接通過屬性名獲取，下面給出兩種常用的獲取方式：

1.通過HTML5提供的dataset獲取

例如上面那段就可以這樣:

var span=document.getElementById('test');
var value=span.dataset.examId;

看到這裡可能就會有疑問了：我儲存的是data-exam-id啊 不關名字對不上，大小寫也不對啊
其實不然，無論是設定還是讀取的時候，對於自定義屬性，都會採取以下措施：

設定自定義屬性的時候，遇見大寫字母自動以‘-’分隔開，並把大寫轉化為小寫
使用dataset獲取的是data-之後的內容，並且遇見‘-’會自動去掉並轉換對應字母為大寫

2.通過js獲取

而通過js中的Attribute獲取和設定就和上述的轉換規則不同了:

通過DOM.setAttrobute(‘data-name’,‘value’)來設定，在設定的過程中，遇見的大寫全部轉化為小寫，並且不會中間新增‘-’分割

通過getAttribute(‘data-name’)來讀取對應資料，這時如果遇見大寫，則全部轉化為小寫