1. 程式人生 > >html5中data-*自定義屬性

html5中data-*自定義屬性

data-* 屬性是HTML5中的新屬性 <ul>    <li id="a" data-animal-type="鳥類">喜鵲</li>    <li id="b" data-animal-type="魚類">金槍魚</li>     <li id="c" data-animal-type="蜘蛛">蠅虎</li>   </ul> data-*    屬性名不應該包含任何大寫字母,並且在字首"data-"之後必須至少含有一個字元   屬性值可以是任意的字串   使用者代理會完全忽略字首為"data-"的自定義屬性 瀏覽器相容 IE Firefox    Chrome  Safari      Opera 支援 支援        支援       支援      支援

js操作: var aa =document.getElementById("aa"); aa.dataset.myvalue="新值" ;//設定自定義屬性值 console.log(aa.dataset.myvalue);//獲取自定義屬性值 query操作: $("#aa").data("myvalue","新值");//設定自定義屬性值 console.log($("#aa").data("myvalue")); //獲取自定義屬性值   如果data-*自定義屬性中包含了"-",則屬性名為駝峰式名稱,如data-animal-type的屬性名稱為animalType console.log(document.getElementById('a').dataset.animalType);//鳥類 console.log(document.getElementById('a').dataset['animalType']);//鳥類 //console.log(document.getElementById('a').dataset.animal-type);//報錯 type is not defined   console.log(document.getElementById('a').dataset['animal-type']);//undefined   console.log($("#a").data('animal-type'));//鳥類

console.log($("#a").data('animalType'));//鳥類