JavaScript 自定義屬性

■知識(shí)點(diǎn)

    HTML5允許用戶為元素自定義屬性，但要求添加data-前綴，目的是為元素提供與渲染無關(guān)的附加信息，或者提供語義信息。例如：

    <div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhangl23"> 自定義數(shù)據(jù)屬性</div>

    添加自定義屬性后，可以通過元素的dataset屬性訪問自定義屬性。dataset屬性的值是一個(gè)DOMStringMap實(shí)例，也就是一個(gè)名值對(duì)的映射。在這個(gè)映射中，每個(gè)data-name形式的厲性都會(huì)有一個(gè)對(duì)應(yīng)的屬性，只不過屬性名沒有data-前綴。

    瀏覽器支持狀態(tài)：Firefox 6+和Chrome。

■實(shí)例設(shè)計(jì)

下面的代碼演示了如何自定義屬性，以及如何讀取這些附加信息。

var div = document.getElementByld("box");

//訪問自定義屬性值 

var id = div.dataset.myid; 

var name = div.dataset.myname; 

var pass = div.dataset.mypass;

//重置自定義屬性值 

div.dataset.myid = "54321"; 

div.dataset.myname = "lisi";

div.dataset.mypass = "lisi543";

//檢測(cè)自定義屬性

if (div.dataset.myname){

    console.log(div.dataset.myname);

}

雖然上述用法未獲得所有瀏覽器支持，但是仍然可以使用這種方式為元素添加自定義屬性，然后使用getAttribute()方法讀取元素附加的信息。