jQuery操作:$(obj).data("属性名")
示例:
<div data-role="page" data-last-value="43" data-hidden="true" data-options= '{"name":"John"}' ></div> $("div").data("role") === "page" ; // $("div").data("lastValue") === 43 ; //多个连接符"-",驼峰命名方式 $("div").data("hidden") === true ; //取值后会自动转换类型 $("div").data("options").name === "John" ; //调用data中的JSON字符串 $("div").attr("data-hidden") === "true"; //不进行转换
JS操作:
示例:
<div id="tag" data-leaves="2" data-plant-height="4.3m" data-hidden="true" data-options= '{"name":"John"}' ></div>
var tag = document.getElementById("tag");
//getAttribute()取值属性
tag.getAttribute("data-leaves");
tag.getAttribute("data-plant-height"));
//setAttribute()赋值属性
tag.setAttribute("data-leaves","48");
//data-前缀属性可以在JS中通过dataset取值,更加方便
tag.dataset.leaves;
tag.dataset.plantHeight;
//赋值
tag.dataset.plantHeight = "3m";
tag.dataset.leaves--;
//新增data属性
tag.dataset.age = "100";
//删除,设置成null,或者delete
tag.dataset.leaves = null;
delete tag.dataset.age;