HTML5規範裡增加了一個自定義data屬性.
這個自定義data屬性的用法非常的簡單, 就是你可以往HTML標籤上新增任意以 "data-"開頭的屬性, 這些屬性頁面上是不顯示的,它不會影響到你的頁面佈局和風格,但它卻是可讀可寫的.
使用data-*可以解決自定義屬性混亂無管理的現狀。
工具/原料
Internet Explorer 11+ Chrome 8+ Firefox 6.0+ Opera 11.10+ Safari 6+
以上任意瀏覽器一個
方法/步驟
獲取自定義屬性的值
如下：
多了一個”data-*” 屬性, 如何獲取呢?
//js
var content= document.getElementById('content');
alert(content.dataset.age)
//jquery
$('#content').data('age');//讀
讀取的時候是通過dataset物件，使用”.”來獲取屬性，需要去掉data-字首，連字元需要轉化為駝峰命名
//js
var content= document.getElementById('content');
alert(content.dataset.userList)
//jquery
$('#content').data('userList');//讀
通過js方式給data-*設定值
//js
var content= document.getElementById('content');
content.dataset.name='我叫tom'
alert(content.dataset.name)
//jquery
$('#content').data('name','我叫tom');//寫
getAttribute/setAttribute方法的使用
var content= document.getElementById('content');
content.dataset.birthDate = '19990619';
content.setAttribute('age', 25);
console.log(content.getAttribute('data-age')); //25 console.log(content.getAttribute('data-birth-date')); //19990519