[HTML5]資料屬性操作

過去都是用jQuery的.data來操作自訂義屬性,HTML5加入了data-*的做法,可用jQuery或者是HTML的方式操作。

HTML:

<div id="myDiv" data-xxx-item="11111" data-ooo-item="55555"></div>

Javascript:

//【jQuery操作方式】
var div = $("#myDiv");
//取得
var value = div.data("xxx-item");
alert("1.value:"+value);//11111
//賦予
div.data("xxx-item","2222");
var value = div.data("xxx-item");
alert("2.value:"+value);//2222

//【HTML5操作方式(getAttribute)】
//取得
var div = document.getElementById("myDiv");
var value = div.getAttribute("data-xxx-item");
alert("3.value:"+value);//11111
//賦予
div.setAttribute("data-xxx-item","22222");
value = div.getAttribute("data-xxx-item");
alert("4.value:"+value);//22222
//移除
div.removeAttribute("data-xxx-item");
value = div.getAttribute("data-xxx-item");
alert("5.value:"+value);//null

//【HTML5操作方式(dataset)】
//取得
value = div.dataset.oooItem;
alert("6.value:"+value);//55555

//賦予
div.dataset.oooItem = "66666";
value = div.dataset.oooItem;
alert("7.value:"+value);//66666

//移除
div.dataset.oooItem = null;
value = div.dataset.oooItem;
alert("8.value:"+value);//null