過去都是用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