"data-"前綴
可以讓所有的HTML元素都支持自定義的屬性客蹋。
舉個(gè)栗子：
<h1 data-sex="girl">111</h1>
獲取自定義屬性（使用H5自定義屬性對(duì)象Dataset來(lái)獲饶唐堋）
var dataNum = document.getElementsByTagName("h1")[0].dataset.sex;
console.log(dataNum)
//另一個(gè)方法
var another = document.getElementsByTagName("h1")[0].getAttribute("data-sex");
console.log(another)
請(qǐng)注意匹表，dataset 屬性本身可以被讀取，但不能直接寫入宣鄙。相反袍镀，所有的寫入必須是它的“屬性”，這反過(guò)來(lái)表示數(shù)據(jù)屬性冻晤。
自定義的data 屬性名稱轉(zhuǎn)化成 DOMStringMap 的鍵值時(shí)會(huì)遵循下面的規(guī)則：
- 前綴
data-被去除(包括減號(hào))苇羡； - 對(duì)于每個(gè)在ASCII小寫字母
a到z前面的減號(hào) (U+002D)，減號(hào)會(huì)被去除鼻弧，并且字母會(huì)轉(zhuǎn)變成對(duì)應(yīng)的大寫字母设江。 - 其他字符（包含其他減號(hào)）都不發(fā)生變化
與此相反的轉(zhuǎn)換锦茁，即將鍵值轉(zhuǎn)換為一個(gè)屬性的名稱，會(huì)遵循下面的規(guī)則：
- 約束：減號(hào)在轉(zhuǎn)變前一定不能緊跟一個(gè)ASCII小寫字母
a到z之間绣硝； - 添加
data-前綴; - 任何ASCII大寫字母
A到Z將轉(zhuǎn)化成一個(gè)減號(hào)緊跟對(duì)應(yīng)的小寫字母蜻势； - 其他字符不會(huì)發(fā)生變化
上面規(guī)則的約束是為了保證這兩種轉(zhuǎn)換是正好相反的轉(zhuǎn)換撑刺。
例如鹉胖，屬性名稱 data-abc-def 與鍵值 abcDef 相對(duì)應(yīng)。
刪除data一個(gè)屬性
var myH1 = document.getElementsByTagName("h1")[0];
delete myH1.dataset.sex
增加一個(gè)屬性
myH1.dataset.addAttr="thisOne"
兼容處理
if(myH1.dataset){
myH1.dataset.hurry= "carry";
var thevalue = myH1.dataset.hurry;
}else{
myH1.setAttribute("data-attribute","carry");
var theValue = myH1.getAttribute("data-attribute"); // 獲取自定義屬性
}
